例如,我想为页面创建页脚。它应该始终位于底部,所以我会使用:
footer {
position: absolute;
bottom: 0;
}
但是我希望页脚总是有一个顶部边框来标记它:
[...]
border-style: solid;
border-top: 1px;
border-color: gray;
[...]
现在的问题是,如果页脚非常小,它的边框将始终只是内容的宽度。
如果我想使用width: 100%;
将元素的宽度扩展到它的父级宽度,则会将其扩展到屏幕远边缘的右侧。 width: auto;
仅在需要时对其进行扩展,但我希望至少填充父级。
我想要的是它绝对位于它的父级底部,但没有绝对定位对宽度值的“分离”宽度计算。我不想为每个元素添加不同的“max-width”值,具体取决于这样的宽度填充页脚应具有的内容。
示例html:
<html>
<body>
<article>
<section>Lorem Ipsum</section>
<footer>
<a href=www.example.com>Link</a>
</footer>
</article>
</body>
</html>
示例css:
article {
width: 600px;
margin: auto;
}
article footer {
width: 100%;
position: absolute;
bottom: 0;
}
答案 0 :(得分:1)
您可以通过将左侧偏移值设置为0来解决此问题:
footer {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}
然后,您需要将要放置页脚的容器元素设置为具有相对值的位置
.container {
width: 500px;
height: 500px;
position: relative;
margin: 0 auto;
border: 1px solid black;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
background: green;
}
<div class="container">
container
<footer>
footer
</footer>
</div>