Question

我正在尝试构建一个小的网页，但无法使布局按照我的意愿进行操作。我在布局中使用div标签。

问题是我无法让某些div基于其他元素来扩展其高度。我已经读过各种可能的解决方案，但是我尝试了几种，但它们似乎对我没有用，所以我必须正确地实施它们。 clear: both属性似乎是首选的解决方案，但我尝试将其放在不同的位置，但结果没有任何改变。

为了简化我自己的情况，我创建了一个单独的文件只是为了测试此行为，因为只要我不了解它的工作原理，就无法处理原始文件。在下面的示例中，我故意为各个div赋予了一些随机颜色，以说明情况。

.margin {
  background-color: white;
}

.left,
.right {
  width: 5vw;
  height: 100%;
  float: left;
}

.top,
.bottom {
  width: 100%;
  height: 5vw;
}

<body bgcolor="black">
  <div id="mainBox" style="width: 90vw; margin: auto; height: 300px">
    <div class="margin left" style="background-color: aqua"></div>
    <div id="centerColumn" style="width: 80vw; float: left; background-color: yellow; height: 100%">
      <div class="margin top" style="background-color: lightcoral"></div>
      <div id="mainContentBox" style="width: 100%; height: 300px"></div>
      <div class="margin bottom" style="background-color: hotpink"></div>
    </div>
    <div class="margin right" style="background-color: blue"></div>
  </div>
</body>

左右两边的蓝色列应该一直延伸到粉红色条的底部。到目前为止，我已经了解到，由于这些列的高度设置为100％，并且这些列位于“ mainBox” div（当前设置为300px的固定高度）内，因此这些列的高度也为300px。但是mainContentBox也嵌套在mainBox div中，并且当前也设置为300px的高度。

当我从“ mainBox”中删除height属性时，我希望它可以拉伸以适合内容。但是发生的是，左右两列完全消失了，这可能是因为它们不再具有高度了。同样，黄色部分突然延伸到底部粉红色条的顶部。因此如下所示。

我希望有人能给我一个解释，不仅是如何解决它的解释，而且还是我做错了什么或我的思想错误的根源所在。预先感谢您的时间和考虑！

如何使div标签扩展以适合示例中的内容？

0 个答案: