html - 问题设置元素的位置

Question

我不确定为什么我会遇到这样的问题，但我无法让容器显示 100% 宽度并将其放在父元素的底部。

我希望 home-img-text-container2 及其描述位于图像容器的底部，并且它是图像的 100% 宽度。

就像箭头所在的位置:

我所做的是将容器的位置更改为绝对位置:

#home-img-text-container1, #home-img-text-container2 {
    position: absolute;
}

然后修改宽度，放在bottom:0

#home-img-text-container2 {
    bottom: 0;
    width: 100%;
}

除此之外:

#home-img-text-description2:before {
    width: 100%;
}

我所做的修改是在最大 640 像素的视口(viewport)媒体查询中。

没有将 container2 div 放置在图像底部并成为图像宽度的 100%，我做错了什么？

查看 fiddle 以了解我做了什么。

Fiddle

Answer 1

试试这个，如果容器内有 home-img-text-container2 元素，像这样将它放在外面

...
</div> <!-- End of main container -->

<div class="home-img-text-container2"></div>

</body>

然后在你的CSS中:

.container{
min-height: calc(100vh - 80px);
}

80px 是您的 home-img-text-container2 元素的高度 我只是以 80px 为例。确保“-”两边也有空格

calc(100vh-80px); will not work