Question

我正在尝试制作一个带有居中包装div和居中粘性页脚的HTML5页面。这是我的HTML：

<body>
  <div id="wrapper">
    wrapper
  </div>
  <footer>
    this is footer
  </footer>
</body>

这是我的CSS：

#wrapper {
width:800px;
height:100%;
padding:5px;
margin:0 auto;
background-color:#fff;
border-radius:10px 10px 0 0;
box-shadow:0 1px 10px 3px #666;
}

footer {
background-color:#060318;
color:#3cc9e7;
width:800px;
padding:5px;
position:fixed;
bottom:0;
}

这是我得到的结果： enter image description here

如何让它们都居中并且页脚变得粘稠？

Answer 1

我不确定这是否是最佳解决方案，但是：您可以在div内创建一个footer并将此div放在中心位置：

<footer>
    <div>this is footer</div>
</footer>

这是CSS：

footer {
    position:fixed;
    bottom:0;
    left: 0;
    right: 0
}

footer div {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin:0 auto;
}

这是一个显示结果的jsfiddle：http://jsfiddle.net/xRzQy/

Answer 2

position: fixed与position: absolute非常相似。要使它居中，您需要使用JavaScript或添加包装元素：

<div id="footerwrapper">
  <footer>
    this is footer
  </footer>
</div>

CSS：

#footerwrapper {
    width: 100%;
    position: fixed;
    bottom: 0;
}
footer {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin: 0 auto;
}

http://jsfiddle.net/mblase75/JYYX7/

居中div和使页脚粘滞的问题

2 个答案: