gpt4 book ai didi

html - 绝对定位 HTML 元素,但它的 100% 宽度是父元素的宽度

转载 作者:太空宇宙 更新时间:2023-11-04 07:26:33 25 4
gpt4 key购买 nike

例如,我想为页面创建一个页脚。它应该总是在底部,所以我会使用:

footer {
position: absolute;
bottom: 0;
}

但我希望页脚始终有一个顶部边框来标记它:

[...]
border-style: solid;
border-top: 1px;
border-color: gray;
[...]

现在的问题是,如果页脚非常小,它的边框将始终是内容的宽度。

如果我想将元素的宽度扩展到它的父元素的宽度,使用 width: 100%;,它会向右扩展到屏幕的最远边缘。 width: auto; 仅根据需要扩展它,但我希望它至少填充父级。

我想要的是它绝对定位在它父级的底部,但没有绝对定位对宽度值的“分离”宽度计算。我不想为每个元素附加不同的“最大宽度”值,具体取决于宽度填充页脚应具有的父元素。

示例 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 来解决此问题:

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>

关于html - 绝对定位 HTML 元素,但它的 100% 宽度是父元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49837592/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com