使 div 展开以占用所有可用空间 [英] Make div expand to take all the available space

问题描述

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

div {填充:0px}html,身体 {高度:100%；填充:0px；边距:0px；}.外{背景:橄榄色；高度:100%；}.菜单 {背景:橙色；}.should_fill_available_space {背景:棕色；}

<div class="菜单">Lorem Ipsum Lorem Ipsum Lorem Ipsum
<div id="this" class="should_fill_available_space">棕色应该一直向下

我有一个用于这种情况的代码笔: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 在一个方向上工作.因此，您可以将它们视为列(垂直)或行(水平).默认设置是将子元素展开成一行.但是我们想创建一个列.因此，我们必须将 .outer 上的 flex-direction 更改为 flex-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-Fiddle:https://jsfiddle.net/cryh53L7/

html

<div class="菜单">逻辑推理逻辑推理逻辑推理
<div id="this" class="should_fill_available_space">棕色应该一直向下

css

 div{填充:0px}html，正文{高度:100%；填充:0px；边距:0px；}.外{显示:弹性；弹性方向:列；背景:橄榄色；高度:100%；}.菜单{背景:橙色；}.should_fill_available_space{弹性:1；背景:棕色；}

I want a desktop-like full-page width layout. Some menu at the top (uknown height, depending on the content), and div underneath that takes ALL the available space in viewport.

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>

I've got a codepen for this case: https://codepen.io/marek-zganiacz/pen/NvEaxr

I want should_fill_available_space go all way down, as in the case where menu would have height:10% and should_fill_available_space have 'height:90%`.

解决方案

The easiest way to achieve this is using flexbox.

1. You assign display: flex to the parent container. in your case this is outer .outer.
2. a flexbox works in a single direction. So you can look at them like a column (vertical) or row(horizontal). The default setting is that it spreads the children elements out over a row. But we want to create a column. Therefore we have to change the flex-direction on .outer to flex-direction: column.
3. Now we need to specify how we want the flexbox to divide the amount of space available in the .outer. Normal behaviour is that the flexbox gives its children their normal width/height. But by assigning flex:1 to .should_fill_available_space, this element will get all the extra available space. What the flexbox basically says is that we want the computer to use all 1/1 = 100% (used flex value divided by the total flex value of all children) available room to apply to .should_fill_available_space, while keeping minimal space for the .menu width. Technically flex: is a shorthand for some other properties, but that doesn't really matter for this question.

Here is your JS-Fiddle: 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;

    }

这篇关于使 div 展开以占用所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！