CSS: content area has to take 100% height

Question

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:

  <body>

    <!-- Centered container that contains site -->
    <div id="centeredcontainer">            
        <!-- Area with header -->
        <div id="header">                
            header here                              
        </div>            
        <!-- 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                   
            </div>
            <!-- Content on the right -->   
            <div id="content">
                 body here
            </div>                
            <!-- Clears the floats so that next elements can use margins normally -->
            <div class="clearer"></div>
            <!-- Red line under content -->
            <div id="RedLineUnderContent"></div>
        </div>                         
        <!-- Area with languages -->
        <div id="languages">
          footer here           
        </div>                       
    </div>            
</body>

And the relevant CSS is:

body
{
    font-size: 12px;
    font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; 
    line-height:1.5em;      
    margin: 0; 
    padding: 0;   
    background-color: Black;
}

#centeredcontainer  
{
    width: 960px;    
    margin-left: auto ;
    margin-right: auto ;
}

#header
{
    margin-bottom: 20px; 
    margin-top:20px;  
}

#mainmenuandcontent
{  
    width: 960px;
    clear: both;       
    position: relative;    
}

#mainmenu
{        
    float: left;   
    width:180px; 
    padding:10px;
}

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

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

#languages
{        
    margin-top: 10px;   
    margin-left: 200px; 
    margin-bottom:20px;  
    text-transform:uppercase;  
}

.clearer
{
    clear:both;
}

I've had the same problem, but I've never been able to figure out the solution. For whatever reason, `height: 100%;` in CSS has never worked for me. I don't know enough about JavaScript right now, but perhaps you should use it to detect the user's screen resolution and set the height to the approximate number of pixels. Do tell me if you find a suitable solution though. — Edwin, Jul 28 '11 at 19:56

score 5 · Answer 1 · answered Jul 28 '11 at 19:54

5

Perhaps you could use CSS similar to this page, which achieves a 100% height layout?

answered Jul 28 '11 at 19:54

Nightfirecat

10,836
6
32
50

yes I tried this one, but I have a menu on the left which has to be in the background color (black) and the content part that needs to have a gray background color; which is slightly different than the layout in the example :-/ I think in this example the div that contains the content has the size of the content itself, and has no minimum height... – L-Four Jul 29 '11 at 06:31
Yeah, just gave it a try, and had no luck getting the `#mainmenuandcontent` div to expand. – Nightfirecat Jul 29 '11 at 07:22

score 5 · Accepted Answer · answered Jul 28 '11 at 20:01

5

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:

<head>
   ....
    <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";
        }
     </script> 
</head>
<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)

answered Jul 28 '11 at 20:01

Derrick

2,374
2
21
32

Thanks, I will try one more time a pure css solution, but if it doesn't work I may try this (using jquery of course) – L-Four Jul 29 '11 at 06:28
1

what would you do if the content is bigger than the window?? – L-Four Jul 29 '11 at 09:49
Hi, your suggestion inspired me to go the jquery way, and it seems I found a way to do it... – L-Four Jul 29 '11 at 10:09
@Lud: You can use document.body.parentNode.scrollHeight to get the height of the page, and then use the greater of the two (vs innerHeight). – Derrick Jul 29 '11 at 15:34
So people prefer to even use JS insead of using a single table with 3 cells. Proof that most webdesigners are crazy. – John Feb 05 '14 at 11:27

L-Four · Answer 3 · 2011-07-30T06:58:48.253

I think I found a workaround using jquery. I added the following script to the masterpage:

    <script type="text/javascript">
        var contentHeight;
        $(document).ready(function () {
            contentHeight = $('#content').height();
            Resize();
            $(window).resize(function () {
                Resize();
            });
        });                    
        function Resize() {
            currentWindowHeight = $(document).height();                                
            if (contentHeight < currentWindowHeight - 160) {
                $('#content').css('height', (currentWindowHeight - 160) + "px");   
            }                               
        }
    </script>

So after each page load, it gets the height of the original height of the content area. Then it resizes it according to the window height, so that when the content height is smaller than the window height, it resizes to take the window height (minus header and footer heights). If the browser window then is resized, it does exactly the same (using the original content height, not the current!).

Of course, I would have preferred a CSS solution, so if anyone comes up with a bright idea, share it :)

score 1 · Answer 4 · edited May 23 '17 at 11:52

1

You don't need JavaScript for this. Please see my answer for a related question, "Set div to remaining height using CSS with unknown height divs above and below". The content will expand to fill the available area.

edited May 23 '17 at 11:52

Community

1
1

answered Sep 03 '12 at 05:11

Dan Dascalescu

110,650
40
276
363

score 0 · Answer 5 · answered Jul 28 '11 at 20:14

You can set the min-height of the container to 100%, but you also have to set the parent containers to min-height 100% otherwise it won't work. For less modern browsers it sometimes is needed to set the body and even the html tag to height 100% (not min-height!).

hdor · Answer 6 · 2016-06-30T18:14:42.627

-1

Putting a height: 100% on the container?

Updated 2016: Use viewport-relative units instead of percentages or pixels, e.g. width: 100wv; height: 100wh;. The unit stands for a percentage of the browser window size, thus ignoring any parent element sizes.

edited Jun 30 '16 at 18:14

answered Jul 28 '11 at 19:54

hdor

1
2

2

`height: 100%;` never works in CSS for some reason. In fact, `height: (some number)%;` never works in CSS. – Edwin Jul 28 '11 at 20:04
Well this works for me in Safari 5.1 and Firefox … Maybe it's something related to display: block; – hdor Jul 30 '11 at 16:21
float: left; for placing main containers and navigation bars that are static, (don't have some content dynamically wrapping around them) is not considered a good practice. Try using position: absolute; inside an container with auto margin and position: relative; . That will do the trick – hdor Jul 30 '11 at 16:23

CSS: content area has to take 100% height

6 Answers6