指定div的高度为容器的100％减去兄弟div的高度 [英] Specifying height of divs as 100% of container minus height of sibling div
问题描述
我有一个divs在下面的布局
I've got a divs in the following layout
<html style="height:100%">
<body style="height:100%">
<div id="divBody" style="height:100%;width:1000px">
<div id="divHeader" style="height:30px"></div>
<div id="divContent" style="height:100%">
<div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
<div id="divRight" style="width:800px"></div>
</div>
<div>
</body>
</html>
我的问题是divContent如何具有身体的100％的高度。我需要做的是占据divBody的整个高度减去divHeader的高度。所以我将divContent的高度设置为auto：
My problem is that divContent how has a height of 100% of the body. What I need it to do is take up the entire height of divBody minus the height of divHeader. So I set the height of divContent to auto:
<html style="height:100%">
<body style="height:100%">
<div id="divBody" style="height:100%;width:1000px">
<div id="divHeader" style="height:30px"></div>
<div id="divContent" style="height:auto">
<div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
<div id="divRight" style="width:800px"></div>
</div>
<div>
</body>
</html>
现在divContent的高度是正确的，它是divBody的100％减去divHeader的高度，但现在divLeft的高度不会填满其父级（divContent）的100％。
Now divContent's height is correct, it is 100% of divBody minus the height of divHeader, but now the height of divLeft does not fill 100% of it's parent (divContent). How can I get the best of both worlds here?
推荐答案
你应该继续使用百分比，而不是使用固定的像素量为标题。
标题和内容的宽度应该是100％，但高度auto，所以它实际上调整到他们真正的需要在你使用的身体div。
You should go on with the percentages instead of using fix amount of pixels for the header. The widht of header and content should be 100%, but the height "auto", so it actually adjusts to their real need within the body div you're using.
关于div left和right，两者都应该设置为height 100％我猜
Regarding to div left and right, both should set to height 100% I guess
这篇关于指定div的高度为容器的100％减去兄弟div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
