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

时间:2018-04-15 01:07:02

标签: html css position

例如,我想为页面创建页脚。它应该始终位于底部,所以我会使用:

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;
}

1 个答案:

答案 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>