Menu
I'd like to create a DIV as big as the browser window and then show the website using vertical scrolling. The effect I am looking for is similar to the one in THIS PAGE (note the big banner that is always as big as the browser window, and the content at the bottom):
With this HTML in mind:
<div class="banner">
This banner is always big like the browser window
</div>
<div class="content">
Content of the website
</div>
This is one way to do it:
.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}
.content {
width: 100%;
position: relative;
background-color: green;
}
Problem is, if I use absolute position for this DIV the content of my website start from the top of the page and is hidden by the banner.
Is there any way to implement this without using javascript?
Thanks in advance
578
Solution : FIDDLE
CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
.banner {
height:100%;
background-color: red;
}
.content {
background-color: green;
}
Explanation :
The point is to get a base that fits the total window size. You can get this base by setting <body> and <html> tags to 100% height (they expand the total width by default). They then expand to 100% height of the parent which is the window.
So you don't need absolute position anymore to size you elements like the winow.
You can use 100% height on the first level children (in your case .banner) to have them fit the total window height. You will not have to set 100% width on most elements as they automaticaly expand the whole width (block elements like divs that are not floated and in relative or static position).
Your page will keep the default positioning and your .content div will start just under the window size .banner
138
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
