Question

我创建了简单的网页，使用html5和css，css3。

我创建了粘性页脚，这是代码：

#footer {
   position:absolute;
   bottom:0;
   color:#000;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#fff;
}

和换行和标题样式：

#wrap
{
    width:100%;
}
header
{
    width:960px;
    margin:0 auto;

}

从上面的代码中，我的页面如下所示：http://s2.postimg.org/6t4qokwxl/Untitled_1_copy.png

我需要将页脚显示为全宽，但是当我从标题中删除margin:0 auto;时，页脚会显示完全宽度并且没有正确显示页眉。

我需要显示除页脚宽度为960px;和页脚需要全宽。

我在挣扎，任何人都可以帮助我吗？提前谢谢。

Answer 1

如果不了解HTML的结构，很难回答，但从屏幕截图来看，您需要将left: 0添加到页脚CSS，否则它的左侧位置会在左侧edge作为最近的包含块（看起来像是#wrap元素）。

提示：下次，在帖子中添加指向正在运行的代码示例的链接。： - ）

Answer 2

你必须按照这个小提琴做：http://jsfiddle.net/u9he2jjp/

＆＃13;

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

＆＃13;

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

＆＃13;

html5中的宽度样式问题

2 个答案: