CODEWITHSUNDEEP
htmlcss
user3360873
user3360873

Reputation: 53

DIV as big as browser window with no javascript

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

Upvotes: 5

Views: 1530

Answers (2)

web-tiki
web-tiki

Reputation: 103790

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

Upvotes: 4

Aditi
Aditi

Reputation: 509

Try this:

<style>
.banner {

background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.content {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px;
background-color: green;
height: 100%;

}
</style>

Upvotes: 0

Related Questions