ansaurus

Question

Answer 1

+1 A:

It's because there is not enough content to fill it all the way out if you have a large viewing area. If you look on a monitor with a larger window, you can see that it is not white all the way to the footer.

EDIT: add the line padding-bottom:100px to #bodyContainer and margin-top:-100px to #footer and it will work.

Catfish 2010-08-31 20:24:41

@Catfish - I'd normally downvote an answer like this given that is the obvious "answer" with no solution and hence my question in the first place. There are several ways to manipulate CSS (e.g. how my footer sticks to the bottom of every page regardless of height)

JM4 2010-08-31 20:38:44

I've edited my answer. Please try it now.

Catfish 2010-08-31 20:41:46

Actually all you need is to add padding-bottom to the #bodyContainer.

Catfish 2010-08-31 20:43:27

That doesn't work good either...FML

Catfish 2010-08-31 20:44:41

The edited answer works for me and I like it better than my own answer. Sticky Footers are hard! (Let's go shopping!)

Doug 2010-08-31 20:46:17

@Doug - while that solution will work on the homepage, it will not on the Enroll page.

JM4 2010-08-31 20:51:19

note - it also creates an unnecessary vertical scroll unfortunately

JM4 2010-08-31 20:52:48

@Catfish - I apologize, it does still have issues with the enroll page but almost unnoticeable. I thank you for your solution and help!

JM4 2010-08-31 21:06:17

@catfish - I did not have your code utilized on my contact page which uses a background image which must be attached to the bottom, unfotunately this causes the suggestion to fail. Any ideas?

JM4 2010-09-02 16:32:29

I don't think i'm following you. I just checked your link again and I don't see what the problem is.

Catfish 2010-09-02 16:41:13

I think i see it. The boxer is supposed to be down further. Just add a margin-bottom: -40px to the element that has the boxer image.

Catfish 2010-09-02 16:45:36

Answer 2

A:

style.css, line 16, remove height:100%

now

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

after

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}

el_quick 2010-08-31 20:33:55

@el_quick - thanks for the suggestion but i tried that before and it did not work. Removing that line simply brings the footer up tight with the rest of the page (I uploaded the most recent CSS to my site to show what I mean). Unless the page scrolls down, the footer should ALWAYS be at the bottom and it is with the way I had it.

JM4 2010-08-31 20:36:42

That will undo the sticky footer!

Doug 2010-08-31 20:36:57

@doug - good recognition!

JM4 2010-08-31 20:41:10

Answer 3

+1 A:

Give your #wrapper div a background image that is the width and color of the content area with repeat-y.

Edit: Also center the background image!

Doug 2010-08-31 20:37:33

@Doug - this would not work. a) the wrapper encompases the entire page; b) a repeating Y imagine is impossible considering the image I have in the content area is a vertical fade

JM4 2010-08-31 20:40:26

@JM4 I realize that. But the image on the wrapper would appear *behind* the vertical fade image (and behind the header). Set it to the color at the bottom of the fade and it will "extend" the content area visually.

Doug 2010-08-31 20:42:56

thanks for help here doug!

JM4 2010-08-31 21:07:28

Answer 4

+1 A:

Try this. Of course not with inline CSS like mine.

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

Hopefully that helps you.

EDIT: To point out what the solution is. Look at the header and footer CSS position attributes. That should solve it.

Octavian Damiean 2010-08-31 20:41:49

@Mainerror - while this solution would be ideal for a header with image/single DIV (like the footer), it will not work where there are multiple divs as the container cannot be absolute while other items have separate properties

JM4 2010-08-31 21:01:55

Just checked it out myself forgot to add content. You're right it won't fit your needs. Sorry.

Octavian Damiean 2010-08-31 21:05:46

no worries - thank you very much for your help either way!

JM4 2010-08-31 21:07:00

ansaurus

tags:

views:

answers:

CSS Main Body does not stretch to page?

related questions