Layout footer 100% width and content till footer

问题

Im stuck and have no idea how to solve. I have a sticky footer and that works fine. But I want the footer width 100%. For that reason i have a outer div which push the footer to the bottom and a content div which is centered.

Normaly I set a background color for the full outer div. This means it that header, content and footer have the same background color. For each div i can set a custom color which overrides the white (overlay).

Because the layout has now a width of 100% i cant get the content div a background color which is pushed till the footer.

My previous story was a little bit complicated. I will short / clearify my question. How can I have a header and footer with a width of 100% and a content centered in the middle, background color white till the footer? Note: the content can expand or being less as 100% height.

Here is my used HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>Temp</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  <link rel="stylesheet" type="text/css" href="style.css" />
</head> 
<body>
<div id="outer">
  <div id="outer_header">
    <div id="header">
      <div id="menu_block"></div>
      <div id="image_block"></div>
    </div>
  </div> 
  <div id="outer_content">
    <div id="content"> 
    dafdafdafda
    </div> 
  </div>
  <div id="clearfooter"></div> 
  <div id="outer_footer">Footer - | |- Footer </div> 
</div> 
</body> 
</html>

And my CSS

/* mac hide\*/ 
html, body {height:100%} 
/* end hide */ 
body { 
  padding:0; 
  margin:0; 
  text-align:center; /* for ie6 and under */ 
  min-width:1024px;
  background-color: #eee8d8; 
  color: #000000;
} 
#outer { 
  min-height:100%;
  min-width:1024px; 
  width:100%; /* add 2px if borders are not used */ 
  text-align:left; 
  margin:auto; 
  position:relative; 
} 

* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/ 
#outer_header { 
  height:280px;
  width:100%;
  float:left; 
  position:relative;
  background-color:#1f4c3f;
}  

#header { 
  height:280px;
  width:1000px;
  margin:auto;
  position:relative;
}

#menu_block {
  width:1000px;
  height:90px;
}

#image_block {
  width:1000px;
  height:190px;
  background-color:#FFFFFF;
}

#outer_content {
    width:100%;
    position:relative;
    float:left;
  background-color:red;
}

#content { 
  width:1000px;
  height:100%;
  position:relative;  
  margin:auto;
  background-color:#FFFFFF;
}

#outer_footer { 
  width:100%; /* add 2px if borders are not used on the #outer div */ 
  clear:both; 
  height:50px; 
  background-color:#1f4c3f;  
  left:0; 
  bottom:0; 
  position: absolute; 
} 
* html #outer_footer {/*only ie gets this style*/ 
  \height:52px;/* for ie5 */ 
  he\ight:50px;/* for ie6 */ 
  margin-bottom:-1px; 
} 
div,p  {margin-top:0}/*clear top margin for mozilla*/ 

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */

Ps. I want only use CSS if possible, no javascript

Edit: What the result should be is

As you can see, picture one has 1 row white (because the texts ends over there), but i want the content filled till the sticky footer...

回答1:

Hereby three solutions, depending on whished scroll behaviour.

JSFiddle Solution without scrollbars:

Markup:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Stylesheet:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
body {
    background: red;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    position: absolute; 
    background: white;
    width: 500px;
    top: 160px;
    bottom: 40px;
    left: 50%;
    margin-left: -250px;
}
#footer {
    position: absolute;
    bottom: 0;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}

JSFiddle solution with vertical scrollbar and footer always visible:

Markup:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Stylesheet:

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    width: 500px;
    margin: 0 auto;
}
#footer {
    position: fixed;
    bottom: 0;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}

JSFiddle solution with vertical scrollbar and moving footer:

Markup:

<div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

Stylesheet:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#wrap {
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
    width: 100%;
    min-height: 100%;
}
#header {
    height: 160px;
    background: #1f4c3f;
}
#content {
    width: 500px;
    margin: 0 auto;
    padding-bottom: 40px;
}
#footer {
    position: relative;
    top: -40px;
    background: #1f4c3f;
    width: 100%;
    height: 40px;
}

来源：https://stackoverflow.com/questions/15453972/layout-footer-100-width-and-content-till-footer

标签

css

html

layout

sticky-footer