Question

我陷入困境，不知道如何解决。我有一个粘性页脚，工作正常。但我希望页脚宽度为100％。出于这个原因，我有一个外部div将页脚推到底部，内容div居中。

Normaly我为完整的外部div设置了背景颜色。这意味着标题，内容和页脚具有相同的背景颜色。对于每个div，我可以设置一个自定义颜色，覆盖白色（叠加）。

因为布局现在宽度为100％，所以我无法获得内容div的背景颜色，直到页脚。

Layout, outer_content is red, content is white, it should float till the bottom

我以前的故事有点复杂。我会简短/澄清我的问题。我怎样才能有一个页眉和页脚，宽度为100％，内容居中于中间，背景颜色为白色直到页脚？注意：内容可以扩展或减少为100％高度。

这是我用过的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>

我的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 */

聚苯乙烯。我想只在可能的情况下使用CSS，没有javascript

编辑：结果应该是什么

Correct layout

正如你所看到的，图片1有一行白色（因为文本在那里结束），但我希望内容填充到粘性页脚...

Answer 1

此处有三种解决方案，具体取决于悄悄滚动行为。

JSFiddle Solution没有滚动条：

标记：

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

样式表：

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，垂直滚动条和页脚始终可见：

标记：

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

样式表：

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：

标记：

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

样式表：

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;
}

布局页脚100％宽度和内容直到页脚

1 个答案: