Html 如何用三个div分屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6582439/
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 split screen with three divs
提问by Jviaches
How to split screen with three divs by following demands: - main div should cover whole screen (100%x100%) - sub div after div should cover main div( each sub div = 33% )
如何通过以下要求使用三个 div 分屏： - 主 div 应覆盖整个屏幕（100%x100%） - div 后的子 div 应覆盖主 div（每个子 div = 33%）
I tried to do it as following :
我尝试这样做：
<div style="width:100%; height :100%; background-color:Lime;">
sss
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
回答by Litek
回答by Mike C
I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.
我认为您的主要困惑来源是您的“主要”div 只会占用满足样式要求所需的空间。它将占用父元素大小的 100%，但如果未定义该大小，它只会增长到它包含的任何内容所需的最小大小。
In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).
在这个小提琴中，我只是将你的代码包装在一个定义为 200px 高的 div 中，它似乎工作正常（但是，请注意 100% 实际上减少了 'sss' 包含在主 div 中的事实，之前包含的 div）。
回答by user619578
If you want to remove the white margin, set the style to "margin:0" on the body tag.
如果要删除白色边距，请将 body 标签上的样式设置为“margin:0”。
