100% height minus header?

Question

I want to create a layout for an admin panel, but I dont know how to get the #nav and #content container always at 100% of the browser window. I don't understand the inherit of 100% height attributes, could someone explain it more clearly?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index.htm</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

        <div id="header">
            <img src="./img/header_logo.png" alt="bla"/>
        </div><!-- #header -->
        <div id="nav">
        </div><!-- #nav -->
        <div id="content">
        asfdg
        </div><!-- #content -->
        <div class="clear">
        </div>

</body>
</html>

main.css

    html, body{
    font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
img{
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}
#wrapper{

}
#header{
    background: url(img/header_bg.png) repeat-x;
    height: 65px;
    padding-top: 20px;
    padding-left: 25px;
}
#nav{
    width: 235px;
    float: left; 
    background-color: #f7f7f7;
    border-right: 1px solid #d9d9d9;
    height: 100%;

}
#content{
    float: left;
    width: auto;
    padding: 15px;

}
.clear{
    clear: both;
}

any ideas?

unfortunately, height:100% relies on the height of the parent container being explicitly defined. Otherwise, the browser engine has no idea what 100% is. The best way to have this is through javascript with a window resize event. — Thomas Jones, Apr 17 '12 at 19:16
+1. 100% minus whatever would be a nice feature in CSS! E.g. in situations when you need 100% minus some padding/border... Well, this was the biggest advantage of the old non-standard IE box model :-) — Tomas, Apr 17 '12 at 19:17
How does Wordpress manage that? With deactivated Javascript ist also expands both divs to 100% http://cl.ly/FvS4 — nohayeye, Apr 17 '12 at 19:22
This article may help you. The OP uses a fixed header though - http://stackoverflow.com/questions/1192783/css-how-to-set-div-height-100-minus-npx — mrtsherman, Apr 17 '12 at 19:28
@Tomas Have you ever played with the box-sizing CSS property? Example http://jsfiddle.net/post_erasmus/gP5bc/. It lets you set a box dimensions and force padding and border (or just padding) to rendered from the box dimensions inward. — devstruck, Apr 17 '12 at 20:21
@post_erasmus, nice, but it is not cross-browser compliant, is it? — Tomas, Apr 17 '12 at 20:26
@Tomas the padding-box value is firefox/gecko only, but if you include the -webkit-box-sizing property, safari, chrome, firefox, and IE8+ all support border-box. — devstruck, Apr 17 '12 at 20:51
@post_erasmus, well, but I'm not feeling good about using non-standard things... that will completely broke the page for other browsers. — Tomas, Apr 17 '12 at 21:02
Allright, I didn't achieved my goal yet. That's what I want: http://cl.ly/FxTP. I tried cssstickyfooter, the and I don't work as I expected... Any other ideas? — nohayeye, Apr 19 '12 at 12:12
@nohayeye Did you check out my jsfiddle link in the answer below? I believe it matches what you want to achieve. — Bojin Li, Apr 19 '12 at 19:19

score 169 · Accepted Answer · edited May 23 '17 at 11:55

169

If your browser supports CSS3, try using the CSS element Calc()

height: calc(100% - 65px);

you might also want to adding browser compatibility options:

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */

also make sure you have spaces between values, see: https://stackoverflow.com/a/16291105/427622

edited May 23 '17 at 11:55

Community

1
1

answered Jul 03 '13 at 00:13

Jim Clouse

8,774
6
32
25

25

This also works perfectly with `100vh` (viewport height). – JacobF Apr 15 '14 at 06:49
beware, vh does not work well with Safari. – kingPuppy Apr 18 '15 at 12:52
1

@kingPuppy - vh seems to be reliably supported in Safari, with only iOS 7.1 requiring a slight workaround: http://caniuse.com/#search=vh – Matt Dell May 27 '15 at 11:27
10

Quick note: the spaces between the calc variables are required, calc(100%-65px) won't work. – Jens Habegger Dec 28 '16 at 13:22
Interestingly, with tailwindcss, the spaces between calc variables are *not* allowed: https://stackoverflow.com/a/69870451/3518049 – smg Jun 22 '23 at 21:46

Bojin Li · Answer 2 · 2012-04-19T19:18:18.813

16

As mentioned in the comments height:100% relies on the height of the parent container being explicitly defined. One way to achieve what you want is to use absolute/relative positioning, and specifying the left/right/top/bottom properties to "stretch" the content out to fill the available space. I have implemented what I gather you want to achieve in jsfiddle. Try resizing the Result window and you will see the content resizes automatically.

The limitation of this approach in your case is that you have to specify an explicit margin-top on the parent container to offset its contents down to make room for the header content. You can make it dynamic if you throw in javascript though.

edited Apr 19 '12 at 19:18

answered Apr 17 '12 at 20:06

Bojin Li

5,769
2
24
37

but how to make sure the neither the Navbar nor the Main content will expand when the content is bigger than the div's size? like in [this fiddle](http://jsfiddle.net/DEDX8/278/) – Felipe Leão Jun 06 '14 at 21:24
@FelipeLeão You can add "overflow-y: scroll" or "overflow-y: hidden" to #nav and #content. – Tom Sep 12 '20 at 21:29
Please add the content to your answer, since that link could go stale at some point. – Ian Dunn Sep 02 '21 at 20:12

Faust · Answer 3 · 2012-04-17T20:02:30.537

5

For "100% of the browser window", if you mean this literally, you should use fixed positioning. The top, bottom, right, and left properties are then used to offset the divs edges from the respective edges of the viewport:

#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}

This will set up a screen with the left 235 pixels devoted to the nav, and the right rest of the screen to content.

Note, however, you won't be able to scroll the whole screen at once. Though you can set it to scroll either pane individually, by applying overflow:auto to either div.

Note also: fixed positioning is not supported in IE6 or earlier.

edited Apr 17 '12 at 20:02

answered Apr 17 '12 at 19:55

Faust

15,130
9
54
111

1

This is how a lot of HTML5 apps are layed out. For example, the extensions window in Google Chrome is actually a web page with the left-side nav taking fixed positioning. You can scroll the rest of the page to your heart's desire and the nav stays right there. That's fine as long as the user sizes the viewport with enough height to accomodate your nav. – Faust Apr 17 '12 at 20:14

100% height minus header?

3 Answers3