2

我卡住了，不知道如何解决。我有一个粘页脚，效果很好。但我想要页脚宽度 100%。出于这个原因，我有一个将页脚推到底部的外部 div 和一个居中的内容 div。

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

因为布局现在的宽度为 100%，所以我无法让内容 div 的背景颜色被推到页脚。

布局，outer_content 为红色，content 为白色，应该浮动到底部

我之前的故事有点复杂。我会简短/澄清我的问题。我怎样才能有一个宽度为 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

编辑：结果应该是

正确的布局

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

4

1 回答 1

0

特此三种解决方案，具体取决于希望的滚动行为。

  1. 没有滚动条的 JSFiddle 解决方案：

    标记：

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

  2. 具有垂直滚动条和页脚的JSFiddle 解决方案始终可见：

    标记：

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

  3. 带有垂直滚动条和移动页脚的JSFiddle 解决方案：

    标记：

    <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;
}
于 2013-03-16T23:00:11.607 回答