Html 将html页面分成两行50%高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11285371/
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
Divide html page into two rows of 50% height
提问by Harshdeep
I wish to have html page divided into two rows of 50% each. For this I have made two divs featuring as row1 and row2 and set their height:50% in css. Row1 has 3 more divs in it and row 2 has 2 more divs in it. I want that if these inner divs are large enough to be accommodated in 50 height than scrollbars should come in their respective row divs but row1 and row2 should remain to occupy 50% of the screen only.
我希望将 html 页面分成两行，每行 50%。为此，我制作了两个以 row1 和 row2 为特色的 div，并在 css 中设置了它们的高度：50%。第 1 行还有 3 个 div，第 2 行还有 2 个 div。我希望如果这些内部 div 足够大以容纳 50 个高度，那么滚动条应该出现在它们各自的行 div 中，但 row1 和 row2 应该只占据屏幕的 50%。
Content of my HTML is:
我的 HTML 的内容是：
<div class="row" id="row1">
<div class="dragbox" id="item1" >
<h2 class="dragbox-h2">Handle 1</h2>
<div class="dragbox-content" >
Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.
</div>
</div>
<div class="dragbox" id="item2" >
<h2 class="dragbox-h2">Handle 2</h2>
<div class="dragbox-content" >
Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.
</div>
</div>
<div class="dragbox" id="item3" >
<h2 class="dragbox-h2">Handle 3</h2>
<div class="dragbox-content" >
Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare.
</div>
</div>
</div>
<div class="row" id="row2" >
<div class="dragbox" id="item4" >
<h2 class="dragbox-h2">Handle 4</h2>
<div class="dragbox-content" >
Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper.
</div>
</div>
<div class="dragbox" id="item5" >
<h2 class="dragbox-h2">Handle 5</h2>
<div class="dragbox-content" >
Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna.
</div>
</div>
</div>
Snippet of css:
css片段：
.row{
height:50%;
background:#fff;
overflow-y:auto;
}
.row .dragbox{
margin:5px 2px 20px;
background:#fff;
border:1px solid #ddd;
}
How can I make sure that if content of inner tag increase then also row-divs stick to their 50% assigned height.
我怎样才能确保如果内部标签的内容增加，那么行 div 也会坚持其 50% 的指定高度。
Thanks.
谢谢。
回答by anotherdave
You need to make sure that the parent nodes above the row-divs are taking up 100% themselves:
您需要确保行 div 上方的父节点自身占用 100%：
html, body{
height: 100%;
}
(Percentage heights inherit their base height from their parent.)
（百分比高度从其父级继承了它们的基本高度。）
