L-Four L-Four - 1 year ago 60
CSS Question

CSS: content area has to take 100% height

this is driving me crazy... I'm building the page at http://one29090testvdscom.accounts.combell.net/nl. It's a page that has a header, left menu, content and footer. Width is fixed at 960px, centered horizontally. This all works. But then, if there is little text in the content, I would like that the gray content area always takes the available screen height, so that the footer is down the page.

The page looks like:


<!-- Centered container that contains site -->
<div id="centeredcontainer">
<!-- Area with header -->
<div id="header">
header here
<!-- Area that contains main menu on the left and content on the right -->
<div id="mainmenuandcontent">
<!-- Main menu on the left -->
<div id="mainmenu">
main menu here
<!-- Content on the right -->
<div id="content">
body here
<!-- Clears the floats so that next elements can use margins normally -->
<div class="clearer"></div>
<!-- Red line under content -->
<div id="RedLineUnderContent"></div>
<!-- Area with languages -->
<div id="languages">
footer here

And the relevant CSS is:

font-size: 12px;
font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif;
margin: 0;
padding: 0;
background-color: Black;

width: 960px;
margin-left: auto ;
margin-right: auto ;

margin-bottom: 20px;

width: 960px;
clear: both;
position: relative;

float: left;

float: left;
background-color: #403F3F;
width: 760px;
min-height: 400px;

height: 20px;
background: #A10C10;
margin-left: 200px;

margin-top: 10px;
margin-left: 200px;


Answer Source

I know of no cross browser way to do this in CSS alone.

I just did something similar to this last night using JS though:

    <script type="text/javascript">
        function resize() {
            var frame = document.getElementById("main");
            var windowheight = window.innerHeight;
            document.body.style.height = windowheight + "px";
            frame.style.height = windowheight - 180 + "px";
<body onload="resize()" onresize="resize()">

This will resize the Element with id "main" to be the visible height of the window less 180px (180is is the height of my header)