How to split screen with three divs

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

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>

---

You need to set height of body and html to 100%. See this fiddle.

---

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.

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

---

If you want to remove the white margin, set the style to "margin:0" on the body tag.

---

Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen