我正在尝试使用 % 而不是 px，它的行为有点奇怪。 为什么我的页脚继续向右(在元素“pagePlaceHolderInner”之外) 如果我将两个元素(“pagePlaceHolderInner”和“页脚”)都设置为某个 px 数字，它会起作用，但我想在这里使用 %。
代码:
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
background: none repeat scroll 0 0 yellow;
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 20%;
position: fixed;
width: 100%;
}
</style>
</head>
<body>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<h1>Hi guys!</h1>
<div class="footer"></div>
</div>
</div>
</body>
</html>
或检查jsfiddle
最佳答案
您不能按照您通常希望参照整个页面固定元素的方式将元素固定到容器中。相反，您可能必须手动为其指定与父级相同的尺寸，因为它不像普通的子级那样工作，而是像直接位于文档下方的元素一样工作
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
position: fixed;
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
/* The rest of your code for this element */
}
它继承父值的另一种方法是使其位置 absolute ，尽管这不是您想要的。为此，您还需要将 position:relative; 添加到它的容器中
body #pagePlaceHolderOuter #pagePlaceHolderInner {
position:relative;
/* The rest of your code for this element */
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
position:absolute;
/* The rest of your code for this element */
}
关于html - CSS 问题 : fixed footer with width of 100% is too wide，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18432097/