问题设置元素的位置答案

【问题标题】：Issue setting the position of an element问题设置元素的位置
【发布时间】：2016-06-06 15:12:34
【问题描述】：

我不确定为什么我会遇到这样的问题，但我无法让容器显示 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

【问题讨论】：

标签： html css position

【解决方案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

【讨论】：

【解决方案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>

【讨论】：