Html 填充剩余的垂直空间 - 仅 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23389098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fill remaining vertical space - only CSS
提问by Airy
I need to fill the remaining vertical spaceof #wrapperunder #firstwith #seconddiv.
我需要填写剩余的垂直空间的#wrapper下#first用#secondDIV。
I need an only CSS solution.
我需要一个唯一的 CSS 解决方案。
#wrapper {
width: 300px;
height: 100%;
}
#first {
width: 300px;
height: 200px;
background-color: #F5DEB3;
}
#second {
width: 300px;
height: 100%;
background-color: #9ACD32;
}<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>采纳答案by web-tiki
You can do this with position:absolute;on the #seconddiv like this :
您可以像这样position:absolute;在#seconddiv上执行此操作：
CSS :
CSS :
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT : Alternative solution
编辑：替代解决方案
Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :
根据您的布局和这些 div 中的内容，您可以使它更简单，并且标记更少，如下所示：
HTML :
HTML :
<div id="wrapper">
<div id="first"></div>
</div>
CSS :
CSS :
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
回答by xzegga
You can use CSS Flexbox instead another display value, The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
您可以使用 CSS Flexbox 代替另一个显示值，Flexbox Layout (Flexible Box) 模块旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态。
Example
例子
/* CONTAINER */
#wrapper
{
width:300px;
height:300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* SOME ITEM CHILD ELEMENTS */
#first
{
width:300px;
height: 200px;
background-color:#F5DEB3;
}
#second
{
width:300px;
background-color: #9ACD32;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, */
}
If you want to have full support for old browsers like IE9 or below, you will have to use a polyfills like flexy, this polyfill enable support for Flexbox model but only for 2012 spec of flexbox model.
如果你想为旧的浏览器IE9一样或更低的全力支持，你将不得不使用一个polyfills像flexy，这种填充工具启用Flexbox的模型，但仅适用于2012规格Flexbox的模型的支持。
Recently I found another polyfill to help you with Internet Explorer 8 & 9 or any older browser that not have support for flexbox model, I still have not tried it but I leave the link here
最近我发现了另一个 polyfill 可以帮助你使用 Internet Explorer 8 和 9 或任何不支持 flexbox 模型的旧浏览器，我还没有尝试过，但我把链接留在这里
You can find a usefull and complete Guide to Flexbox modelby Chris Coyer here
您可以在此处找到Chris Coyer 撰写的有用且完整的 Flexbox 模型指南
回答by Reggie Pinkham
Flexbox solution
弹性盒解决方案
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
}
.first {
height: 50px;
}
.second {
flex-grow: 1;
}<div class="wrapper">
<div class="first" style="background:#b2efd8">First</div>
<div class="second" style="background:#80c7cd">Second</div>
</div>回答by Pete
If you can add an extra couple of divs so your html looks like this:
如果您可以添加额外的几个 div，那么您的 html 看起来像这样：
<div id="wrapper">
<div id="first" class="row">
<div class="cell"></div>
</div>
<div id="second" class="row">
<div class="cell"></div>
</div>
</div>
You can make use of the display:tableproperties:
您可以使用以下display:table属性：
#wrapper
{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
#first .cell
{
height:200px;
background-color:#F5DEB3;
}
#second .cell
{
background-color:#9ACD32;
}
回答by Stian Eggum Tellnes
Have you tried changing the wrapper height to vh instead of %?
您是否尝试将包装高度更改为 vh 而不是 %？
#wrapper {
width:300px;
height:100vh;
}
That worked great for me when I wanted to fill my page with a gradient background for instance...
例如，当我想用渐变背景填充我的页面时，这对我很有用......
回答by Tobias Koller
If you don't want to have fix heights for your main-container (top, bottom, ....), you can simply use this css-fileto get a flex-container which uses the remaining space incl. working!!! scrollbars
如果你不想为你的主容器（顶部，底部，......）固定高度，你可以简单地使用这个css 文件来获得一个使用剩余空间的 flex 容器，包括。在职的！！！滚动条
<!DOCTYPE html>
<html >
<head>
<title>Flex Container</title>
<link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">
<style>
.cont{
background-color: blue;
position: absolute;
height: 100%;
width: 100%;
}
.headerContainer {
background-color: green;
height: 100px;
width: 100%;
}
.mainContainer {
background-color: white;
width: 100%;
overflow: scroll
}
.footerContainer {
background-color: gray;
height: 100px;
width: 100%;
}
</style>
</head>
<body class="qx-flex-ready" style="height: 100%">
<div class="qx-vbox cont">
<div class="headerContainer">Cell 1: flex1</div>
<div class="mainContainer qx-flex3">
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
</div>
<div class="footerContainer" >Cell 3: flex1</div>
</div>
</body>
</html>
回答by JimmyRare
回答by Mawazini
You can just add the overflow:autooption:
您可以添加溢出：自动选项：
#second
{
width:300px;
height:100%;
overflow: auto;
background-color:#9ACD32;
}
回答by valerio0999
you need javascript and some client side calculations: http://jsfiddle.net/omegaiori/NERE8/2/
您需要 javascript 和一些客户端计算：http: //jsfiddle.net/omegaiori/NERE8/2/
you will need jquery to effectively achieve what you want. this function is very simple but very effective:
你将需要 jquery 来有效地实现你想要的。这个功能非常简单但非常有效：
(function () {
var heights = $("#wrapper").outerHeight(true);
var outerHeights = $("#first").outerHeight(true);
jQuery('#second').css('height', (heights - outerHeights) + "px");
})();
first it detects the wrapper height, as it is set to 100% it's different everytime (it depends on what screen you are landing).
in the second step it gives the #seconddiv the appropriate height subtracting from the wrapper height the #firstdiv height. the result is the available height left in the wrapper div
首先它检测包装高度，因为它被设置为 100%，它每次都不同（这取决于你着陆的屏幕）。在第二步中，它为#seconddiv提供适当的高度，从包装高度减去#firstdiv 高度。结果是包装器 div 中剩余的可用高度
