Menu
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?
273
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
The line-height property specifies the height of a line. Note: Negative values are not allowed.
The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height .
When using the keyword auto , height is calculated based on the elements content area unless explicitly specified. This means a value based on a percentage is still that of the elements content area.
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
64
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
