CODEWITHSUNDEEP
css
Timothy D
Timothy D

Reputation: 155

Extending div to bottom of page

I'm having a problem extending a div with a gradient background (which is nested in the body tag) to the bottom of a page when the browser viewport is taller than the content of the page.

I know that I can set my html, body, and respective div tag to 100%, but when I do that the div tag height is equal to the height of the html and body tag, which is set by the size of the viewport. This either creates too much space in the div below the content contained therein (if the viewport is too large), even when the viewport is NOT taller than the page. Or it cuts off the content in the div and the viewport won't scroll down (if the viewport is sized to small).

You can see the issue at matthewelliot.com. If you zoom out to 25%, you'll see the white gradient at the bottom breaks into the background image once the content has filled the #addition-gradient div. You may ask, Well who is going to zoom out that far? But I noticed this issue when I visited the site on my iPhone holding it 'portrait', and I'm sure plenty of others will have the same experience.

Let me know if you need any more code to help diagnose!

Upvotes: 4

Views: 1988

Answers (2)

Jeremy John
Jeremy John

Reputation: 1715

What you are looking for is a sticky footer:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Please have a look at this: https://stackoverflow.com/a/3525675/1700554

EDIT:

Try this:

Create a new DIV fter the body tag like so:

<body>
<div class="body2">
PUT ALL OTHER DIVs AND CONTENT IN HERE.
</div>
</body>

And for the CSS like so:

body {
    background-color: #FFFFFF;
}   
.body2 {
    background-image: url(../_images/bg/bedge_grunge.png);
    background-repeat: repeat;
    background-attachment: fixed;
}

As you can see the result in this jsfiddle (using your original content minus the css and images): http://fiddle.jshell.net/zbaBZ/show/

Upvotes: 1

parker.sikand
parker.sikand

Reputation: 1381

Quick and dirty fix would be to put your high level divs (title_bar, nav_bar, etc) in a wrapper div, apply the background to the wrapper, and make the body background white. But I'm sure there's a purely CSS3 solution to this. I'll try to find it.

Upvotes: 1

Related Questions