Div Div在Div高度内

Question

我有一个div的高度为15％，另一个div的高度为15％。内部div有一个<p>标签，并且这个<p>标签从内部div中删除，但是当我移除内部div的高度时，一切正常。这是我的html代码和CSS代码。

.header {
  background-image: url("images/headerBg.jpg");
  height: 15%;
  width: 100%;
}

.title {
  background-color: red;
  float: left;
  height: 15%;
}

<div class="header">
  <div class="title">
    <h2>Title</h2>

  </div>


</div>

请参见下图以供参考。红色是内部div，“标题”应位于红色内部，但不是html

Answer 1

您需要在.title类中将高度更改为min-height

.header{
   background-image:url("images/headerBg.jpg");
   height:15%;
   width:100%;
}
.title{
  background-color:red;
  float:left;
  min-height:15%;
}

它将为您提供以下视图（我只是使用背景色而不是图像，您可以使用任何想要的颜色。）

您可以向左移去浮动并按宽度游玩。

如果您删除左浮动，就会出现此外观

这个外观将带有宽度，我刚刚添加了100px，您可以根据需要进行调整