内股利没有得到父母的div高度

HTML：

<div class="clearfix bigBox"> 
    <div class="bigBoxBody"> 
     <div class="containerWithHeaderContent"> 
     </div> 
    </div> 
</div>

CSS：

#content .bigBox { 
    padding-bottom: 9px; 
    width: 100%; 
} 
#content .containerWithHeader, .containerWithHeaderContent { 
    padding: 10px 0; 
    width: 100%; 
} 

.clearfix:after { 
    clear: both; 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
    width: 0; 
}

我的问题是，内部div（bigBoxBody）似乎没有得到与外部div的高度一致的高度（bigBox）。

屏幕截图：

（外格为红色，内格是绿色的。） enter image description here

我不知道什么是错，或者如果有任何其他的东西，需要照顾使用CSS。

的jsfiddle：http://jsfiddle.net/UFFx3/2/

来源

2012-11-17 Finding Nemo

我不明白你有什么要求？你能解释一下吗？ – kannanrbk

尝试设置显示：块 – Brian

@bharathi：我害怕我的问题没有意义。我的问题是内部div似乎是gettind放置在父div之外，将尝试添加一个屏幕截图。 –

的div自然不会占用提供给他们完整的垂直空间。例如，请参阅此jsfiddle。外部div的显式高度为100像素，内部div完全没有指定高度。内部div因此只占用显示其内容所需的空间。

HTML：

<div class="outer"> 
    <div class="inner"> 
     <p>Content here!</p>  
    </div> 
</div>

CSS：

.outer { 
    background: red; 
    height: 100px; 
} 
.inner { 
    background: green; 
}

如果你想在内部DIV占用所有可用的垂直空间，在CSS设置height:100%。一个例子见jsfiddle。

新建CSS：

.outer { 
    background: red; 
    height: 100px; 
} 
.inner { 
    background: green; 
    height: 100%; /* new line */ 
}

我不知道是否有任何更多的细节，以你的问题，因为你使用的是不是在你的例子所示的clearfix CSS类。请让我知道是否有其他东西缺失，以解决您的问题。

来源

2012-11-17 16:06:42

这就是我不是在CSS中的粉丝，是高度的功能，特别是当它达到百分比的方式。从理论上讲，你应该可以在页面上有1个div，给它一个100％的高度并填充页面，而不必在设置高度时在它周围包裹另一个div ... – VIDesignz

我已经更新了我的问题与屏幕截图 –

你有没有尝试设置'高度：100％'到内部分区？它看起来像绿色的div是自动调整大小以适应书名，但由于某种方式浮动而变得混乱。我需要查看整个页面的实际代码内容，以了解发生了什么问题。 –

在你的情况下（从屏幕截图看来）内部div似乎并没有扩展到它内部的内容。因此，它不是将内部div扩展到外部div的高度，而是让内部div接受扩展到其内容的情况。

因此，我建议你尝试设置内的div包含overflow:auto，卸下外层div的高度限制，允许在高度无限生长如下

.outer { 
    background: red; 
} 
.inner { 
    background: green; 
    overflow : auto; 
}

来源

2013-09-18 07:52:57

内股利没有得到父母的div高度

回答

相关问题