使 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>

我有一个用于这种情况的代码笔： https://codepen.io/marek-zganiacz/pen/NvEaxr

我希望should_fill_available_space 一直向下，例如menu 将有height:10% 和should_fill_available_space 有'height:90%`。

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，同时为 @ 保留最小的空间987654331@ 宽度。从技术上讲，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;

    }

Answer 2

Try this!

我用的是桌面显示器，希望对你没问题:)

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%;
}

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;
}

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);

还有here is the codepen。