Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我为此案例设置了一个codepen： https://codepen.io/marek-zganiacz/pen/NvEaxr

我希望should_fill_available_space一路向下，就像menu height:10%和should_fill_available_space高度：90％`的情况一样。

Answer 1

实现这一目标的最简单方法是使用flexbox。

您将display: flex分配给父容器。在你的情况下，这是外.outer。
flexbox在单一方向上工作。因此，您可以像列（垂直）或行（水平）一样查看它们。默认设置是将子元素扩展到一行。但是我们想要创建一个列。因此，我们必须将flex-direction上的.outer更改为flex-direction: column。
现在我们需要指定我们希望flexbox如何划分.outer中可用的空间量。正常行为是flexbox为其子节点提供正常的宽度/高度。但是，通过将flex:1分配给.should_fill_available_space，此元素将获得所有额外的可用空间。 flexbox基本上说的是我们希望计算机使用所有1/1 = 100％（使用的flex值除以所有孩子的总弹性值）可用空间来应用.should_fill_available_space，同时保持最小的空间.menu宽度。flex:。从技术上讲，<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>是其他一些属性的简写，但这对于这个问题并不重要。

这是你的JS-Fiddle：https://jsfiddle.net/cryh53L7/

html

 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;

    }

<强> CSS

ustr.Substring(ustr.Length - 1) + ustr.Substring(1, ustr.Length - 2) + ustr.Substring(0, 1)

Answer 2

您可以明确指定height属性。

因此第一个div元素将具有height of 10%，第二个div元素将具有height of 90%。

Answer 3

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 4

您可以使用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 5

这是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。

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

5 个答案: