Question

这就是问题所在。我有一个div，其中包含几段文字，然后是一个浮动的图像。图像按原样浮动，但包含的div不会垂直扩展以适应图像。我知道我可以手动设置div的高度，但这会产生问题，因为我想对我网站的每个页面使用相同的div，因此高度需要不同。

以下是代码示例：

#main_contentbox {
  width: 918px;
  margin: 10px auto;
  padding: 10px 20px 20px 20px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

#main_contentbox img#sample {
  float: right;
}

<div id="main_contentbox">
  <h1 class="page"> The Event </h1>
  <img id="sample" src="sample.jpg" />
  <p>
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>

  <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!


</div>

Answer 1

您可以通过更改overflow属性来更改父块如何处理浮动内容的行为。这应该这样做：

#main_contentbox { overflow: hidden; }

Answer 2

虽然@ cletus的解决方案在技术上是正确的，但将溢出设置为除overflow: visible（默认值）以外的任何值，initial（明确使用默认值），或inherit父级visible会导致该元素创建新的block formatting context。块格式化上下文是浮动元素可以与块交互的区域。这种情况（浮动元素在非溢出：可见元素内）被明确列为创建新上下文的必要原因：

＆＃34;如果浮动与滚动元素相交，则会强制重新包装内容。每次滚动步骤后都会发生重绕，导致滚动体验变慢。＆＃34; - mdn

因此，对于这个新环境中的任何直接孩子，将重新计算身高，并且将包括他们的身高。

我希望尽可能使用overflow: auto来完成此操作，但scroll，overlay或hidden都会产生所需的结果，包括浮动计算父元素的高度。

Answer 3

使用:after伪类，您可以让命名div自动附加一个明确的修复。将其添加到您的css文件中：

#main_contentbox:after {
  content: "Foo";
  visibility: hidden;
  display: block;
  height: 0px;
  clear: both;
}

有了这些，你无需做任何事情来迫使main_contentbox成长为包含它的花车，无论你在哪个页面上。

Answer 4

尝试使用JavaScript的东西：

window.onload = FixMyDiv();

function FixMyDiv()
{
  var divh = document.getElementById('main_contentbox').style.offsetHeight;
  var imgh = document.getElementById('sample').style.offsetHeight;

  if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50;


}

如何使div高度增加以包括浮动图像

4 个答案: