javascript - 它如何正确设置 div 的高度？

Question

我是响应式 CSS 布局的新手。
我有以下代码。

.parent{
  position:relative;
  border:1px solid #eee;
}

.child{
  margin-top:30px;
  font-size:18pt;
  border:4px solid #ff6600;
  padding:20px;
  color:#f00;
}

.footer{
   background-color:#333;
   color:#fff;
}

img{
  width:100%;
  z-index:-10;
  position:absolute;
  top:0;
}

<div class="parent">
  <img src="https://www.vacations-abroad.com/assets/img/about.jpg">
  <div class="child">
    The responsive design:<br>
    This is the content.
  </div>
</div>
<div class="footer">
   Footer
</div>

内容必须放在图片上方。
每当窗口宽度较小且图像高度小于内容文本框高度时，我想在图像和内容文本之后放置“页脚”。
但是“页脚”覆盖在图像上。我该如何解决这个问题？
谢谢。当改变窗口宽度时，会得到如下结果。

Answer 1

你的标签有绝对位置，所以这个标签的高度不依赖于.parent div的高度。
要解决此问题，您必须将父标签的最小高度设置为与内容或图像高度相同。

试试这段代码。

    .parent{
      position:relative;
      border:1px solid #eee;
      min-height:180px;
    }

    .child{
      margin-top:30px;
      font-size:18pt;
      border:4px solid #ff6600;
      padding:20px;
      color:#f00;
      position:absolute;
    }

    .footer{
       background-color:#333;
       color:#fff;
    }

    img{
      width:100%;
      z-index:-10;
      position:relative;
      top:0;
    }

<div class="parent">
    <div class="child">
    The responsive design:<br>
    This is the content.
  </div><img src="https://www.vacations-abroad.com/assets/img/about.jpg">

</div>
<div class="footer">
   Footer
</div>