PaulF PaulF - 1 month ago 6
CSS Question

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

I have some HTML and CSS which produces this page:
enter image description here

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:
enter image description here

Ive seen other on here have had a similar problem and ive tried suggested answers.

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

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

Ive also tried using height: 100vh; and that doesnt do it.

Ive 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/

Answer

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

Comments