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

Question

我希望有一个类似桌面的全页宽度布局。 在顶部有一些菜单（高度未知，取决于内容），并且在下面的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`完全延伸到底部，就像菜单具有`height:10％`和`should_fill_available_space`具有`height:90％`的情况一样。

- user961474

Answer 1

实现这个的最简单方法是使用flexbox。

1. 将display: flex分配给父容器。在这种情况下，父容器是外部的.outer。
2. flexbox在单个方向上工作。因此，您可以将它们视为列（垂直）或行（水平）。默认设置是将子元素沿行分布。但是我们想创建一个列。因此，我们必须更改.outer上的flex-direction为flex-direction: column。
3. 现在，我们需要指定如何在.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="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;

    }

- Rob Monhemius

Answer 2

试一下这个！

我用了一个表格展示，希望你觉得可以 :)

HTML:

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

CSS：

div{
 padding: 0px
}
html, body{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.outer {
 background: olive;
 height: 100%;
 display:table;
 width:100%;
}
.menu{
 background: orange;
 display:table-row;

}
.should_fill_available_space{
 background: brown;
 display:table-row;
}

div+ div{
 height:100%;
}

- IlReDelleFinte

Answer 3

你可以使用CSS3中的flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）来实现这一点。

更新你的CSS，像这样看到它的工作：

.outer {
    background: olive;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.should_fill_available_space{
  background: brown;
  flex-grow: 2;
}

- David

Answer 4

这是Web文档标准与基于视口的桌面应用程序仿真相遇的地方。您需要将容器定位为绝对位置。在这些容器中，您将能够设置相对位置元素或使用将使用HTML流的元素。

有许多API可以在幕后完成这项工作，它们通常会依赖于JavaScript计算来根据它们的尺寸放置元素，这些元素被附加到DOM后。

以下是基于您的代码的简单示例：

div{
  padding: 0px
}
html, body{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.outer {
  background: olive;
  height: 100%;
  width:100%
  position:absolute;
}
.menu{
  background: orange;
}
.should_fill_available_space{
  background: brown;
  position:absolute;
  bottom:0px;
  width:100vw;
}

<div class="outer">
  <div id="menu" 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>

正如我所提到的，您可以使用JavaScript来检索菜单的尺寸，然后将其应用于您的布局。

window.addEventListener("load", function load(event){
    var menu = document.getElementById("menu");
  var main = document.getElementById("this");
  var menuHeight = menu.offsetHeight;
  main.style.top = menuHeight + "px";
},false);

这里是codepen。

- Julio Feferman