0

我正在尝试制作一个带有居中换行 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;
}

这是我得到的结果： 在此处输入图像描述

如何使它们都居中并使页脚保持粘性？

4

2 回答 2

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/

于 2012-11-27T15:50:45.027 回答
1

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/

于 2012-11-27T15:51:17.580 回答