如何拉伸 div 高度来填充父 div-CSS

我有一个 div页面，如下面的布局/截图所示:

layout

密码在这里:

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;
border: solid 4px #00CC00;
}


#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;
}
<div id="container">
<div id="A">A</div>
<div id="B">
<div id="B1">B1</div>
<div id="B2">B2</div>
</div>
<div id="C">C</div>
<div id="D">D</div>
</div>

我想调整的 B2 div的高度，以填补(或延伸到)整个 B div(在图像中用绿色边界标记) ，不想跨越页脚 D div。这里是一个工作小提琴 链接(更新)。我该怎么解决这个问题？

452628 次浏览
小开

Http://jsfiddle.net/qwdxr/1/

使用“ 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;
}
小开

如果你要使用 B2的样式目的，你可以尝试这个“黑客”

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

JsFiddle

小开

我的目标是创建一个 div，它总是在整个浏览器窗口中以固定的数量限定。

起作用的，至少在火狐上，是这个

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

只要不强制实际窗口滚动，div 就会在所有重新调整大小期间将其边界保留在窗口边缘。

希望这能节省一些时间。

小开

假设你有

<body>
<div id="root" />
</body>

使用普通的 CSS，您可以执行以下操作

#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

有了弹簧盒，你就可以了

html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}


#root {
width: 100%
}
小开

B2集装箱 相对位置相对位置

顶部位置 B2 + 剩余高度

高度 B2 + 高度 B1或剩余高度

小开

如果您正在使用 JQuery，您可以这样做:

<body onload="$('nav').height($('main').height());">
小开

我总是注意到这对于表是可能的，所以只要将 div 显示类型更改为表类型就可以了。

控制宽度: 将容器 div 设置为 display: table (或 inline-table) ，在 div 内部设置为 display: table-cell，如下所示:

<div style='width: 100%; height: 100%; display: table;'>
<div style='background-color: red; width: 50%; height: 100%; display: table-cell;'>
Left Side
</div>
<div style='background-color: green; height: 100%; display: table-cell;'>
Right Side<br>
<div style='background-color: blue; width = 100%;'>
This is 100% of remainder!
<div>
</div>
</div>

左边的 div 为50% ，右边的内部 div 将填充其余部分。您甚至可以在右内部放置另一个100% 宽度的 div，它将填充其余部分。

要控制高度，只需使用 table-row 而不是 table-cell:

<div style='width: 100%; height: 100%; display: table;'>
<div style='background-color: red; width: 100%; height: 100%; display: table;'>
<div style='background-color: red; width: 100%; height: 20%; display: table-row;'>
Top Side
</div>
<div style='background-color: green; height: 100%; display: table-row;'>
Bottom Side<br>
</div>
</div>
</div>
小开

我刚刚找到了另一个解决方案，就是绝对定位所有东西，然后使用{ top: 0; bottom: 0}。

#B {
position:absolute;
width: 200px;
height: 200px;
background-color: orange;
}
#B1 {
position:absolute;
top:0;
bottom: 0;
width: 100%;
background-color: cyan;
}
#B2 {
position:absolute;
bottom: 0;
height: 35px;
width: 100%;
background: green;
}
<div id="B">
<div id="B1">B1</div>
<div id="B2">B2</div>
</div>

请注意，有一些重叠。


提交答案