Best IT Recipes

100% height minus title?

I want to create a layout for the admin panel, but I do not know how to get the #nav and #content container always in 100% of the browser window. I don't understand the inheritance of 100% height attributes, can anyone explain this 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?

+45
html css
Apr 17 '12 at 19:11
source share
3 answers

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

 height: calc(100% - 65px);

You can also add 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 the values, see stack overflow.site/questions/119212 / ...

+78
Jul 03 '13 at 0:13
source share

As stated in the comments height: 100% relies on the height of the parent container, which is explicitly defined. One way to achieve what you want is to use absolute / relative positioning and specify “left / right / top / bottom” properties to “stretch” the content to fill the available space. I have implemented what I am going to, you want to achieve in jsfiddle . Try resizing the results window and you will see that the content size automatically changes.

The limitation of this approach in your case is that you need to specify an explicit margin-top in the parent container in order to shift its contents down to make room for the contents of the header. You can make it dynamic if you use javascript.

+14
Apr 17 2018-12-12T00:
source share

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

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

This will create a screen with 235 pixels left dedicated to the navigation bar and the rest of the screen for content.

Please note that you cannot scroll the entire screen at a time. Although you can set it to scroll one panel separately, applying overflow:auto to the div.

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

+3
Apr 17 '12 at 19:55
source share


More articles:


All Articles