CSS Main Body does not stretch to page?

StackOverflow https://stackoverflow.com/questions/3612890

  •  26-09-2019
  •  | 
  •  

Question

I am beating my head against a wall trying to figure out why the code I have written for a particular site doesn't quite work.

The main body of my pages (the white area in link below) should be stretching from navigation to the footer but only does so on certain pages.

The footer is automatically placed at the bottom of every page regardless of height (i.e. will be at page bottom on a 400px height page).

Is it possible I am just missing something very basic?

I have posted a link to the dev version of the site at:

www.contendertest.com

The pages I am having trouble with are index and the 'enroll' link.

Was it helpful?

Solution

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.

OTHER TIPS

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!

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.

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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top