Question

如何按照以下要求拆分三个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>

Answer 1

您需要将body和html的高度设置为100％。请参阅此fiddle。

Answer 2

我认为你混淆的主要原因是你的“主要”div只会占用满足风格要求所需的空间。它将占用父元素大小的100％，但如果没有定义该大小，它只会增长到它所包含的任何内容所需的最小大小。

在这个fiddle中，我只是将你的代码包装在一个定义为200px高的div中，它似乎工作得很好（但是，请注意，'sss'实际上减少了100％包含在主div中，包含在div之前。）

Answer 3

如果要删除白色边距，请在正文标记上将样式设置为“margin：0”。

Answer 4

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

如何用三个div分割屏幕

4 个答案: