4

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!

Timothy D
  • 155
  • 2
  • 13

2 Answers2

1

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.

parker.sikand
  • 1,371
  • 2
  • 15
  • 32
  • The quick and dirty method makes sense, buy I'd like to see if there is a way to maintain the structure and perform a little css magic :) Let me know if you trump across anything. – Timothy D Nov 19 '12 at 00:02
1

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/

Community
  • 1
  • 1
Jeremy John
  • 1,665
  • 3
  • 18
  • 31
  • I'm not sure this is quite what I need. The portion of the page I need to reach the bottom of the viewport isn't strictly a footer. In fact, that gradient is only on the index page, so I don't have this issue anywhere else. The actual footer is the Copyright line, which sticks underneath the main content of each page and doesn't have to sit on the bottom (although now that I know how to do that, maybe I will implement it). What I need is for the bottom edge of the #addition-gradient div to be 'sticky' to the bottom of the viewport, but I still want the div content to be flush with the slider. – Timothy D Nov 19 '12 at 04:29
  • Exactly. I didn't take a thorough look through the coding to make sure it's identical in every instance, but that's what I'm getting at. – Timothy D Nov 19 '12 at 05:53
  • @TimothyD Edited my answer please take a look. – Jeremy John Nov 19 '12 at 17:06
  • 1
    This is pretty similar, if not identical to @parker.sikand answer. I don't really want to go about changing the basic structure of the page, since all the pages on the site refer to the same global style sheet and I would have to make changes on all pages. I only need the index page to be effected. I have to think there is something that can be applied to just the #addition-gradient div without changing other styles to achieve the look I'm seeking. – Timothy D Nov 19 '12 at 22:10