Question

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

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

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

这是我的问题的一个小问题：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;}

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

Answer 1

两件事：

您需要在页脚上使用position: absolute。
您需要在包装器上指定一个位置属性才能为其提供布局。

e.g。 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;}

将固定位置html元素相对于父容器而不是浏览器居中

1 个答案: