如何拉伸 div 高度以填充父 div - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5581799/
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
How to stretch div height to fill parent div - CSS
提问by blasteralfred Ψ
I have a page with divs like below
我有一个像下面这样的 div 页面
<div id="container">
<div id="A">
</div>
<div id="B">
<div id="B1"></div>
<div id="B2">B2</div>
</div>
<div id="C"></div>
<div id="D">
</div>
</div>
with styling as;
样式为；
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
margin-top: -35px;
bottom: 0;
background-color: #FFFFFF;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
I want to adjust the height of div B2to fill (or stretch to) entire div B(marked with a green border) and don't want to cross footer div D. Here is a working fiddle demo(updated). How can I solve this??
我想调整 div 的高度B2以填充（或拉伸到）整个 div B（用绿色边框标记）并且不想越过页脚 div D。这是一个工作小提琴演示（更新）。我该如何解决这个问题？？
采纳答案by Snorbuckle
Simply add height: 100%;onto the #B2styling. min-heightshouldn't be necessary.
只需添加height: 100%;到#B2样式。min-height应该没有必要。
回答by onmyway133
Suppose you have
假设你有
<body>
<div id="root" />
</body>
With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html
使用普通 CSS，您可以执行以下操作。查看可用的应用程序https://github.com/onmyway133/Lyrics/blob/master/index.html
#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
With flexbox, you can
使用 flexbox，你可以
html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%
}
回答by x10
Use the "min-height" property
Be wary of paddings, margins and borders :)
使用“min-height”属性
注意填充、边距和边框:)
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
min-height: 100%;
height: 100%;
margin-top: -35px;
bottom: 0;
background-color: red;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}
回答by Leo Smith
What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.
适合我的目的是创建一个始终以固定数量限制在整个浏览器窗口内的 div。
What worked, at least on firefox, was this
至少在 Firefox 上有效的是这个
<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.
只要实际窗口没有被强制滚动，div 在所有重新调整大小期间将其边界保留到窗口边缘。
Hope this saves someone some time.
希望这可以节省一些时间。
回答by Teneff
回答by Dmytro Yurchenko
B2 container position relative
B2 容器位置相对
Top position B2 + of remaining height
剩余高度的顶部位置 B2 +
Height of B2 + height B1 or remaining height
B2高度+B1高度或剩余高度
回答by NKCSS
I'd solve it with a javascript solution (jQUery) if the sizes can vary.
如果大小可能会有所不同，我会使用 javascript 解决方案 (jQUEry) 解决它。
window.setTimeout(function () {
$(document).ready(function () {
var ResizeTarget = $('#B');
ResizeTarget.resize(function () {
var target = $('#B2');
target.css('height', ResizeTarget.height());
}).trigger('resize');
});
}, 500);
