1

我有一个固定的 div，我希望它始终显示在页面底部。此 div 需要在站点内居中，即浏览器窗口的 75% 宽度。内容也居中。

我知道固定元素使用浏览器窗口进行定位，但我如何让它与包含元素的宽度和位置保持一致？

另外，由于固定元素应该相对于浏览器窗口，为什么默认情况下它不从左边距开始（我知道 left: 0 会解决这个问题）？

这是我的问题的 js 小提琴：http: //jsfiddle.net/ZN7g8/

HTML：

<div id="wrapper">  
<div id="one"></div>
<div id="two"></div>
<div id="three">
  <p>Some text...........</p>
</div>

CSS：

#wrapper { width: 75%; max-width: 800px; height: 100%; margin: 0 auto;}
#one {height: 100px; background-color: red }
#two {height: 100px; background-color: blue }
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: fixed; bottom: 0}
#three p {text-align: center;}

我已经看到其他几个暗示这个问题的问题，但似乎都在处理固定宽度的网站。

4

1 回答 1

1

两件事情：

  1. 您需要position: absolute在页脚上使用。

  2. 您需要在包装器上指定一个位置属性才能为其提供布局。

例如 http://jsfiddle.net/WzxGA/

#wrapper { width: 75%; max-width: 800px; height: 100%; min-height:500px; margin: 0 auto; position:relative;}
#one {height: 100px; background-color: red }
#two {height: 100px; background-color: blue }
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: absolute; bottom: 0}
#three p {text-align: center;}
于 2013-08-12T16:17:48.723 回答