使div's的高度随着内容展开

我有这些嵌套的div，我需要主容器扩展(在高度)，以适应内部的div

    <!-- head -->
...
<!-- /head -->


<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>


<div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>


<div id="footer">
</div>
</body>
</html>

CSS是这样的:

* {
padding: 0;
margin: 0;
}


.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}


.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}


.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}

我遇到的问题是#main_content没有拉伸以容纳所有内部div，其结果是它们一直与背景相反。

考虑到上述情况，我该如何解决这个问题?

838088 次浏览
小开

将float属性添加到#main_content div -它将展开以包含其浮动内容

小开

通常我认为这可以通过在#items_list的最后一个子元素上强制使用clear:both规则来解决。

你可以使用:

#items_list:last-child {clear: both;}

或者，如果你使用的是动态语言，在创建列表本身的循环中生成的最后一个元素中添加一个额外的类，这样你就会在html中得到这样的东西:

<div id="list_item_20" class="last_list_item">

和css

.last_list_item {clear: both; }
小开

以下应该工作:

.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
小开
最佳答案

你需要在#main_content div关闭之前强制clear:both。我可能会将<br class="clear" />;移动到#main_content div中，并将CSS设置为:

.clear { clear: both; }

更新:这个问题仍然有相当大的流量，所以我想用一个现代的替代方法CSS3中的新布局模式称为Flexible boxes或Flexbox来更新答案:

body {
margin: 0;
}


.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}


header {
background-color: #3F51B5;
color: #fff;
}


section.content {
flex: 1;
}


footer {
background-color: #FFC107;
color: #333;
}
<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>


<section class="content">
Content
</section>


<footer>
<h4>
Footer
</h4>
</footer>
</div>

大多数现代浏览器目前支持Flexbox和窗口单位，但如果你必须保持对旧浏览器的支持，请确保检查特定浏览器版本的兼容性。

小开

增加如下内容:

overflow:hidden;
height:1%;

消除了对clear. div的额外<br />的需求。

小开
< p >试试这个: overflow: auto; < / p >

这对我的问题有效。

小开

在CSS中:#clear_div{clear:both;}

在内部div的div标签后添加这个新的下面的div

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp:获取更多信息

小开

我自己在一个项目上遇到了这个问题-我在一个div里面有一个表，它是从div的底部溢出来的。我尝试过的高度修复都没有工作，但我发现了一个奇怪的修复方法，那就是在div的底部放一个段落，里面只有一个句号。然后将文本的“颜色”设置为与容器的背景相同。工作整齐如你所愿，不需要javascript。不间断的空间是不行的，透明的图像也不行。

显然，它只需要看到表下面有一些内容，以便拉伸以包含它。我想知道这对其他人是否也适用。

这是一种让设计师求助于基于表格的布局的事情——我花了大量的时间来解决这个问题，并使它跨浏览器兼容，这快把我逼疯了。

小开

使用带有display:inline-block css的span标签。然后你可以使用CSS并像div一样以多种方式操作它，但如果你不包括width或height，它会根据其内容展开和收缩。

希望这能有所帮助。

小开
如果你使用的是jQuery UI，他们已经有一个类的作品只是一个魅力 在你想用height:auto;展开的div的底部添加<div> 然后添加一个类名ui-helper-clearfix或使用这个样式属性并像下面这样添加:

<div style=" clear:both; overflow:hidden; height:1%; "></div>

添加jQuery UI类到clear div，而不是你想要展开的div。

小开

作为一种替代方法，你也可以尝试这种方法，在某些情况下可能是有用的

display:table;

jsFiddle

小开

看起来效果不错

html {
width:100%;
height:auto;
min-height:100%
}

它以屏幕尺寸为最小值，如果内容扩展，它就会增长。

小开

我会用

height: auto;

是的，我知道我来晚了一点，但我想这可能会对别人有帮助，就像它在这里对我有帮助一样。

小开

我知道这是一种旧线程，然而，这可以通过min-height CSS属性以一种干净的方式实现，所以我将把它留在这里以供将来参考:

我根据这里发布的OP代码:http://jsfiddle.net/U5x4T/1/做了一个fiddle，当你在里面删除和添加div时，你会注意到容器是如何扩展或缩小大小的

要做到这一点，除了OP代码，你只需要做两件事:

*主容器溢出(需要浮动div)

*最小高度css属性，更多信息可在这里:http://www.w3schools.com/cssref/pr_dim_min-height.asp

小开

当父Div的子元素被浮动时，就会出现这个问题。下面是问题的最新解决方案:

在CSS文件中写入以下类.clearfix和伪选择器:after

.clearfix:after {
content: "";
display: table;
clear: both;
}

然后，在你的HTML中，将.clearfix类添加到你的父Div中。例如:

<div class="clearfix">
<div></div>
<div></div>
</div>

它应该总是工作的。你可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。 注意，没有必要在双引号""之间的内容值中添加点或空格。此外，溢出:汽车;可能会解决这个问题，但它会导致其他问题，如显示滚动条，不建议使用

来源:Lisa Catalano和Chris Coyier的博客

小开

在做任何事情之前检查css规则:

{ position:absolute }

删除如果存在，不需要他们。

小开

增加了显示:内联到div和自动增长(不是滚动的东西)时，高度内容变得更大，然后设置div高度200px

小开

我将Bootstrap添加到一个带有section标记的项目中，我已将其设置为屏幕高度的100%。它工作得很好，直到我使项目响应，在这一点上，我借用了< >强jennyfofenny < / >强劲的答案的一部分，所以当屏幕大小在较小的屏幕上发生变化时，我的部分背景与内容的背景相匹配。

我的新section CSS看起来像这样:

section {
// min-height so it looks good on big screen
// but resizes on a small-screen
min-height: 100%;
min-height: 100vh;
width:100%;
width:100vh;
}

假设你有一个特定颜色的区域。通过使用min-height，如果部分的宽度因为屏幕变小而缩小，部分的高度将扩大，内容将保持在部分中，而背景将保持所需的颜色。

小开

不需要使用大量的CSS，只需使用bootstrap，然后使用:

class="container"

用于需要填充的div。

你可以从这里得到bootstrap

小开

我试过了，效果很好

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
小开

浮动元素不占用父元素内部的空间，顾名思义，它们是浮动的!因此，如果没有显式地将height提供给其子元素浮动的元素，则父元素将显示为缩小&似乎不接受子元素的维度，如果它的overflow:hidden;，它的子元素可能不会出现在屏幕上。有很多方法可以解决这个问题:

  1. 在具有clear:both;属性的被浮动元素下面插入另一个元素，或者在被浮动元素的:after上使用clear:both;。

  2. 使用display:inline-block;或flex-box代替float。

小开
你试过传统的方法吗? 给出主容器的高度:auto

#container{height:auto}

我用过这个方法，大部分时间都很有效。

小开

非常简单的方法

在父DIV上:

height: 100%;

这对我每次都有效

小开

你可以使用CSS网格布局。目前支持范围相当广泛:在caniuse上检查它。

下面是jsfiddle上的例子。还有带有大量文本的例子。

HTML代码:

<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>

CSS代码:

html, body {
width: 100%;
height: 100%;
margin: 0;
}


.container {
width: 100%;
height: 100%;


display: grid;
grid-template-rows: 100px auto 150px;
grid-template-columns: auto;
}
// style stuff
小开

我尝试了上面列出的每一条建议，但没有一条奏效。然而，“display: table”对我来说很管用。

小开

我已经尝试过height: fit-content，它为我工作


提交答案