Menu
I have a html document with div and css like this:
<html>
<head>
<title></title>
<style text="text/javascript">
body { padding:0px; margin:0px; }
.full { background-color: yellowgreen; width: 100%; height: 100%; }
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
</style>
</head>
<body>
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</body>
</html>
Menu is fixed, behindMenu is the same size as Menu and it is behind menu. Then I have logo and div with class full. After the full is div with class content.
When visit that page I want that div full will be (size) between logo and bottom od the browser size. So the full must have a height between logo and bottom of the browser size, even if I resize window. When scroll down then user will see The rest of content.
Something like this: http://strobedigital.com/
Here is fiddle: http://jsfiddle.net/2963C/
407
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.
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport. Caveat: Using this method, if the user makes their window smaller, content will be cut off.
HTML
<html>
<head>
<title></title>
<style text="text/css">
body { padding:0px; margin:0px; }
.full { background-color: yellowgreen; width: 100%; height: 100%; }
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</div>
</body>
</html>
CSS
html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; top:0; left:0; width:100%; height:100%;}
There is a simple solution supported by all modern browsers.
div#full {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but only in the system browser (Chrome works ok).
Browser support chart: http://caniuse.com/viewport-units
30
.full { min-height: 100%; height:auto;}
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
