I’m trying to create a page composed of 3 sections, each having a height

Question

0

Asked: June 10, 20262026-06-10T08:27:16+00:00 2026-06-10T08:27:16+00:00

I’m trying to create a page composed of 3 sections, each having a height

0

I’m trying to create a page composed of 3 sections, each having a height of 100% of the window / viewport. I found a way to do this that works in Chrome, Firefox (at least the newer versions) and Safari. It isn’t working, however in IE8 (and possibly other versions as well).

Here’s the test page: http://dev.manifold.ws/test3/

Here’s the HTML:

<body>

    <section id="section1">
    </section>

    <section id="section2">
    </section>

    <section id="section3">
    </section>

</body>

And here’s the CSS:

#section1 {
    min-height:100%;
    position:relative;
    background:#fc1b59;
}

#section2 {
    min-height:100%;
    position:relative;
    background:#d5ea27;
}

#section3 {
    min-height:100%; 
    position:relative;
    background:#0048ff;
}

Would anyone have a cross-browser solution to this? (At least the major newer browsers)
Thanks!

-Thom