Search code examples
htmlcssheightoverflow

Content after height 100% container not being pushed down

I have three children elements (.inner) inside a container (.container) with height 100%. After that, I have another div (.post) that is not being pushed down under the container.

Here's a fiddle http://jsfiddle.net/yVDXQ/526/

HTML:

<html>
<body>
<div class="container">
    <div class="inner">Inner1</div>
    <div class="inner">Inner2</div>
    <div class="inner">Inner3</div>
</div>
<div class="post">Some content</div>
</body>
</html>

CSS:

html {
    height: 100%;
    }

body {
    background: red;
    height: 100%;
    }

.container {
    background: yellow;
    height: 100%;
    width: 50%;
    margin: 0 auto;
}

.inner{
    height:100%;
    background:blue;
    border:1px solid #fff;
}
.post{
    height:300px;
    width:50%;
    background: green;
}

Most of this content will be dynamically generated in Wordpress so I dont have as much control as I would like to.

The choices I found so far and that I want to avoid are:

  1. Setting overflow to auto on .container, which would work but give me a scroll bar, leaving me with two scrollbars (body and .container)

  2. Using JS to set the real height to .container

Is there another way to do this?

Thanks

Solution

  • One option would be to use viewport relative units.

    5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

    The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

    In this case, you would set the height of each .inner element to 100vh. Just remove the other heights that were defined.

    Updated Example

    .inner {
    height: 100vh; /* Added */
    background: blue;
    border: 1px solid #fff;
}

    This is supported in most modern browsers - support can be found here.

    If you were to use JS to solve this, you would need to listen to the resize event on the window. From there, you would set the height of each .inner element to the height of the browser. I wouldn't suggest doing this, though.