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

我所做的修改是在最大640px视口媒体查询中。

如果没有将container2 div放在图像的底部并且是图像宽度的100％，我做错了什么？

看到小提琴，看看我做了什么。

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作为例子。确保在＆＃34; - ＆＃34;的任何一侧都有空格。以及

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

Answer 2

我尝试重新创建您的页面，一切正常。这是代码：

<html>
<head>
</head>
<body>
<style>

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

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

</style>

<div id=home-img-text-description1>
<div id=home-img-text-container2>
Text inside the container2
</div>
</div>
</body>

问题设置元素的位置

2 个答案: