Html 如何用三个div分割屏幕

如何按以下要求将屏幕拆分为三个div： -主分区应覆盖整个屏幕（100%x100%） -div后的子div应涵盖主div（每个子div=33%）

我试着按如下方式做：

    <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>

sss
A.
B
C

您需要将

body

和

html

的高度设置为100%。请看这一点。

我认为您的主要困惑源于您的“主”div只会占用满足样式要求所需的空间。它将占父元素大小的100%，但如果未定义该大小，则只会增长到它所包含的任何元素所需的最小大小

---

在本文中，我只是将您的代码包装在一个定义为200px高的div中，它似乎工作得很好（但是，请注意，由于“sss”包含在主div中，在包含的div之前，实际上减少了100%。

如果要删除白边距，请将样式设置为“margin:0”在body标签上。

使用display:flex并确保将每个标签的宽度设置为33%，这样可以确保三个标签占据屏幕的1/3