使div扩展以占用所有可用空间

用户名

我想要一个类似桌面的整页宽度布局。顶部的某些菜单(高度未知,取决于内容),而其下面的div占用视口中的所有可用空间。

div {
  padding: 0px
}

html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.outer {
  background: olive;
  height: 100%;
}

.menu {
  background: orange;
}

.should_fill_available_space {
  background: brown;
}
<div class="outer">
  <div class="menu">
    Lorem Ipsum Lorem Ipsum Lorem Ipsum
  </div>
  <div id="this" class="should_fill_available_space">
    Brown color should go all the way down
  </div>
</div>

对于这种情况,我有一个codepen:https ://codepen.io/marek-zganiacz/pen/NvEaxr

我想要should_fill_available_space走一路下来,在该情况下,menu将具有height:10%should_fill_available_space具有“高度:90%'。

罗伯·蒙西缪斯

实现此目的的最简单方法是使用flexbox。

  1. 您分配display: flex给父容器。在你的情况下,这是外在的.outer
  2. flexbox在单个方向上工作。因此,您可以像列(垂直)或行(水平)一样查看它们。默认设置是将子元素散布在一行中。但是我们要创建一个列。因此,我们必须改变flex-direction.outerflex-direction: column
  3. 现在,我们需要指定我们希望flexbox分配的可用空间量的方式.outer正常行为是flexbox为其子级赋予其正常的宽度/高度。但是通过分配flex:1.should_fill_available_space,此元素将获得所有额外的可用空间。flexbox基本上说的是,我们希望计算机使用所有1/1 = 100%(使用的flex值除以所有子项的总flex值)可用的空间.should_fill_available_space,同时保持最小的.menu宽度空间从技术上讲,这flex:是其他一些属性的简写,但这对这个问题并不重要。

这是您的JS小提琴:https : //jsfiddle.net/cryh53L7/

html

<div class="outer">
  <div class="menu">
    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum
  </div>
  <div id="this" class="should_fill_available_space">
    Brown color should go all the way down
  </div>
</div>

的CSS

 div{
      padding: 0px
    }
    html, body{
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .outer {
      display: flex;
      flex-direction: column;
      background: olive;
      height: 100%;
    }
    .menu{
      background: orange;

    }
    .should_fill_available_space{
      flex: 1;
      background: brown;

    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

托管viewPager的Android FrameLayout占用所有可用空间

ListView占用LinearLayout中的所有空间

Service Fabric日志占用了所有可用磁盘空间

在同一行上渲染元素,其中输入元素占用所有可用空间

清晰度:是否有建议的方法使clr-datagrid占用所有可用的垂直空间?

强制flexbox元素不占用所有垂直空间

将页眉和页脚设置为内容高度,内容部分将占用所有可用空间

使TabBarView占用所有剩余空间

React Native图像占用了所有可用的垂直空间

占用ConstraintLayout中元素之间的所有可用空间

有什么办法可以使div扩展以覆盖所有可用空间,隐藏其扩展到的所有内容吗?

如何自动占用CSS网格中的所有可用空间

当其父按钮的高度最小时,如何使按钮占用所有可用空间?

如何防止Row占用所有可用宽度?

如何使GridView占用其列中所有可用的宽度?

将flex列与div一起使用时会占用所有剩余空间

使用CSS使彼此相邻的div占用所有垂直空间

Photoshop的暂存磁盘占用了所有磁盘空间

GridBagLayout中的组件放置在中心,而不会占用所有可用空间

设置显示:div内没有div仍然占用空间

mergeChangesFromContextDidSaveNotification占用所有空间

如何使绝对定位的div占用所有可用的宽度空间?

创建一个div,该div占用其他两个之间的所有空间

CSS:使列表中的所有<li>宽度相同,并占用100%的可用空间

CSS:div height占用父级的所有可用空间

使输入占用所有剩余空间

使ImageView占用所有可用的垂直空间并增加宽度以在RelativeLayout中按比例放大/缩小

ListView占用了所有屏幕空间

Windows 终端当前目录地址占用所有行空间

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档