使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走一路下跌，如情况下menu将有height:10%和should_fill_available_space有'高度：90％'。

Answer 1

最简单的方法是使用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％（使用的弹性值除以所有儿童的总弹性值）可用空间适用于.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; 

    } 

Answer 2

您可以直接指定高度属性。

因此，第一个div元素将有height of 10%，第二个将有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

这是网页文档标准的世界满足基于视窗的桌面应用程序仿真。你需要容器​​被绝对定位。在这些容器中，您将能够设置相对位置元素或使用将使用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。