Make CSS Div 100% Height of page (Not window)

Question

I have some HTML and CSS which produces this page:

The DIV Called "maincontent" stretches the page down (in a live enviroment this is likely to happen so ive simulated this with repeated lines)

However when I scroll down the div called "navtower" doesnt stretch to the bottom of the page, like so:

I've seen other on here have had a similar problem and ive tried suggested answers.

I've set my body to be relative and that doesn't seem to of helped either.

I've tried changing "navtower" from absolute to relative but that doesn't do it.

I've also tried using height: 100vh; and that doesnt do it.

I've also tried using height: 100%;

I've also tried using bottom: 0px; and still, no luck.

the code is as follows: https://jsfiddle.net/3evzk0L8/

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            html, 
            body {
                margin:0;
                padding:0;
                height:100%;
            }
            body {
                position:relative;
            }
            #topbar {
                height: 40px;
                width: calc(100% - 200px);
                position: absolute;
                left: 200px;
                background-color: #CA0000;
                z-index:99;
            }
            #navtower {
                width: 200px;
                left: 0px;
                top: 0px;
                bottom: 0px;
                height:100%;
                background-color: #CA0000;
                position: absolute;
                z-index:99;
            }
            #maincontent {
                min-height: 100%;
                width: calc(100% - 200px);
                left: 200px;
                background-color: #E3E1FF;
                position: absolute;
                top: 40px;
            }



            </style>
            </head>

            <body>
            <div id="navtower">Content for  id "navtower" Goes Here</div>
            <div id="topbar">Content for  id "navtower" Goes Here</div>
            <div id="maincontent">Content for  id "navtower" Goes Here
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            Content for  id "navtower" Goes Here<br/>
            </div>

            </body>
            </html>

any ideas? I can't see why other suggested answers aren't working.

jsfiddle: https://jsfiddle.net/3evzk0L8/

It's because they're both `position: absolute;`. You'll need to reconfigure your layout. Let me whip up a jsfiddle for how you might be better off doing this. — Tyler Roper, Oct 14 '16 at 20:35
@PaulF How is something like this? https://jsfiddle.net/3evzk0L8/2/ — Tyler Roper, Oct 14 '16 at 20:39
@Santi Im afraid that still doesn't work. I filled
with a load of content and when I scroll down has exactly the same problem :( — PaulF, Oct 14 '16 at 20:41
@PaulF https://jsfiddle.net/3evzk0L8/3/ - is this your desired look? — Tyler Roper, Oct 14 '16 at 20:42
@Santi that's done it! Ill have a read through the code and use this for the future. thanks! If youd like to post this as the answer ill mark it as so. — PaulF, Oct 14 '16 at 20:46
@PaulF Sounds good. I'll outline it a bit better so you know what's going on. — Tyler Roper, Oct 14 '16 at 20:46
Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — George Katsanos, Oct 14 '16 at 20:58

score 0 · Answer 1 · answered Oct 14 '16 at 20:47

Make one wrapper div and put div's in there. after those divs. All we need to do is clear the float, and this entire problem goes away. Put this empty div AFTER your last floated object:

<div style="clear: both;"></div>

https://css-tricks.com/the-how-and-why-of-clearing-floats/

score 0 · Accepted Answer · answered Oct 14 '16 at 20:56

I believe this may be what you're after.

I've restructured your page a bit. I have separated the entire thing into two columns - the left one (#navigation) 200px wide, and the right one (#main) fills the remaining space. Together, they are in a container div (#container). Because the container will expand to fit the content, and its completely hidden aside from your side-bar, you can color this container to change the background color of the navigation.

Here is the code:

HTML

<div id="container">
    <div id="navigation">
        SIDE COLUMN
    </div>
    <div id="main">
        <div id="top">
            TOP BAR
        </div>
        <div id="content">
            CONTENT
        </div> 
    </div>
    <div style="clear: both;"></div>
</div>

CSS

    html, body {
      margin:0;
      padding:0;
    }

    #container {
      background-color: #ccc;
    }

    #navigation {
      float: left;
      width: 200px;
    }

    #main {
      float: left;
      height: 100%;
      width: calc(100% - 200px);
    }

    #top {
      width: 100%;
      height: 50px;
      background-color: #666;
    }

    #content {
      width: 100%;
      background-color: white;
    }

Visual Example

Make CSS Div 100% Height of page (Not window)

2 Answers2