使div的高度随其内容扩展

376

我有这些嵌套的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，结果它们一直在后台运行。

考虑到以上情况，如何解决此问题？

css  height 
— 帕特里克
source
5
伙计们，谢谢大家的回答！对于我的特定情况，最好的解决方案是对BR进行硬编码以清除双方（感谢Jennyfofenny和Ricebowl）。无论如何，其他解决方案也起作用了：放置overflow：auto没问题，浮动#main_content也没问题（尽管ir将该div的宽度减小到子div的大小）。现在成为新手，我想知道：这些解决方案是否有缺点，或者我可以冷漠地使用它们？（例如，其中一个可能无法与IE6或类似版本一起使用...）
— patrick
1
@Patrick，如果您想进一步发展问题，请单击“编辑”链接（在问题的当前文本下方），然后添加其他问题。约定建议使用类似的内容，<strong>Edited</strong>$Reason_for_revising_question...如果重点有重大更改或增加，则可能需要更改问题标题以反映更改。=）
— 大卫说要
4
您也从未使用来关闭div标签id='container'。这可能会导致一些问题。
— 巴特金斯2012年
@patrick，您也没有用于.clear课程的CSS 。您忘记了它，还是在原始代码中？正如@jennyfofenny在回答中提到的那样.clear，该课程br非常重要。
— 杀人剂'17

Answers:

280

您需要clear:both在#main_contentdiv关闭之前强制输入a 。我可能会将其<br class="clear" />;移入#main_contentdiv并将CSS设置为：

.clear { clear: both; }

更新：这个问题仍然有相当多的流量，因此我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式，用一种现代的替代方法来更新答案：

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和视口单元，但是如果您必须保持对旧版浏览器的支持，请确保检查特定浏览器版本的兼容性。

— 珍妮·弗芬妮
source
4
这是关于CSS clear属性的w3schools文章。基本上，clear表示将clear应用于的元素从其流中的float下方开始（仅向左，仅向右或双向）。
— jennyfofenny
230

尝试这个： overflow: auto;

它解决了我的问题。

— sipőczpéter
source
10
+1，此解决方案非常优雅，不会在您的页面上添加不可见的标记。看到这个小提琴：jsfiddle.net/XmKrm/1
— Nabil Kadimi
5
溢出自动对我来说效果很好。仅供参考，如果溢出自动容器的高度小于内部内容的高度，则会添加滚动条。调整大小或设置高度：自动与溢出一起使用。
— 布莱恩·迈尔斯
@ Roozbeh15添加display: block;它
— BadAtPHP
2
最好，最简单的解决方案...您救了我的一天。谢谢
— Kashyap Kotak '18
天哪，这很棒。有人在乎解释为什么这起作用的潜在机制吗？
— Merkurial
86

添加以下内容：

overflow:hidden;
height:1%;

到您的主要部门 消除了对额外内容的需求<br />。

— 缺口
source
哇！那和我期望的完全相反！溢出：隐藏=扩展以适合内容！我永远都不会猜到！
— mulllhausen
是的，这对我也起作用，并且为什么还不完全正确。有什么解释为什么“身高1％”和“隐藏溢出”有效的原因？
— 阿卡隆
1
真的，它是如何工作的，甚至是为什么起作用的，如果没有设置高度，为什么隐藏的溢出不仅隐藏所有内容（cos高度为0），而是自身扩展，是否有任何解释或只是相信并感到高兴？
— Max Yari 2015年
1
溢出：隐藏隐藏滚动条，但保持块的大小
— authentictech
仅对'overflow：hidden'起作用，但对'overflow：auto'也起作用，并且不显示滚动条。
— Whirlwind991
60

作为替代方法，您也可以尝试在某些情况下可能有用的方法 

display:table;

jsFiddle

— h0mayun
source
24

我只会用

height: auto;

在您的div中 是的，我知道我来晚了一点，但我认为这可能会对某人有所帮助，就像它在这里对我有帮助。

— 查尔斯
source
height: auto;使下面的所有项目移至顶部。在我的主要内容div上使用此属性后，页面的页脚就会向上移动，使其触及页眉并与我的内容div重叠。
— 亚伦·弗兰克
1
这是我的解决方案。谢谢！
— Nik Hammer-Ellis，
14

以下应该工作：

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— Steerpike
source
添加溢出：自动工作，尽管如果我还添加宽度：100％，这将导致div（#main_content）略大于其父div。没明白为什么！
— 帕特里克
2
那是因为除了指定的宽度外，还有填充数，因此元素的宽度为100％+ 5px左填充+ 5px右填充
— NickV
1
溢出：自动；为我工作，非常感谢veddy。
— 中远科技
8

使用span标签和display:inline-block附加的css。然后，您可以使用CSS并以多种方式像div一样操作它，但是如果您不包含width或，height它基于它的内容扩展和伸缩。

希望能有所帮助。

— 黑暗马克
source
您的希望奏效了：它至少帮助了我！:)顺便说一句，我将元素保留为div（而不是span），但display: inline-block在我的情况下（Chromium）仍然有效。
— snapfractalpop
6

通常，我认为可以通过clear:both对的最后一个子元素施加规则来解决此问题#items_list。

您可以使用：

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

或者，如果您使用的是动态语言，则在循环创建列表本身的最后一个循环中生成的最后一个元素中添加一个额外的类，从而最终在html中添加如下内容：

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

和CSS

.last_list_item {clear: both; }
— 大卫说恢复莫妮卡
source
6

当父Div的Child元素浮动时，会出现此问题。这是该问题的最新解决方案：

在您的CSS文件中，编写以下名为.clearfix的类以及伪选择器：after 

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

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

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

它应该一直工作。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。请注意，不必在双引号“”之间的Content值中添加点或什至空格。另外，溢出：自动；也许可以解决问题，但是会导致其他问题，例如显示滚动条，因此不建议这样做。

来源：Lisa Catalano和Chris Coyier博客

— 伊夫蒂·马哈茂德（Ifti Mahmud）
source
5

在#main_contentdiv中添加一个float属性-然后它将展开以包含其浮动内容

— 射线
source
谢谢雷，尽管它使div缩小到其内容的大小（#items_list）（宽度为400px；如果我可以使#main_content保持其最大宽度，您的解决方案将非常好-有什么建议吗？
— 帕特里克
@Ray 2和几年后，这使我免于遭受类似问题的困扰。谢谢！
— 约翰H
4

在执行任何操作之前，请使用以下命令检查CSS规则：

{ position:absolute }

删除（如果存在）并且不需要它们。

— Onalbi
source
2
因为“绝对定位的元素已从流中删除，因此被其他元素忽略。因此，您不能根据绝对定位的元素来设置父级的高度。” stackoverflow.com/questions/12070759/...
— 费德里科
4

浮动元素不会占据父元素内部的空间，顾名思义，它们是浮动的！因此，如果未明确为其浮动子元素的元素提供高度，则父元素将缩小并且看起来不接受子元素的尺寸，即使给定overflow:hidden;其子元素的元素也可能未出现在屏幕上。有多种方法可以解决此问题：

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

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

— Apoorv Srivastava
source
3

看起来像这个作品

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

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

— 物质MX
source
2

我将Bootstrap添加到section具有设置为屏幕高度100％的标签的项目中。在我使项目响应之前，它一直很好用，这时我借用了jennyfofenny的答案，所以当屏幕尺寸在较小的屏幕上更改时，我的部分背景与内容的背景匹配。

我的新sectionCSS如下所示：

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，如果部分的宽度由于屏幕较小而缩小，则该部分的高度将扩大，内容将保留在该部分内，并且背景将保持所需的颜色。

— 阿德里安
source
1

我自己在一个项目中遇到了这个问题-我的div内有一张桌子从div的底部溢出。我尝试过的所有高程修复方法都没有用，但是我发现了一个怪异的修复方法，那就是在div的底部放置一个段落，其中只包含一个句点。然后将文本的“颜色”样式设置为与容器的背景相同。如您所愿，工作整洁，不需要javascript。不间断的空间将不起作用-透明的图像也不起作用。

显然，只需要查看表下方有一些内容即可进行扩展以包含它。我想知道这是否对其他人有用。

这种事情使设计师不得不诉诸于基于表格的布局-我花了很多时间弄清楚这些东西并使其与浏览器兼容，这让我发疯。

— 南希·黑斯廷斯
source
必须是使用CSS做到这一点的某种方法，但我不知道那会是什么。这对我有用，但是我必须添加width：100％; 高度：自动；最低高度：100％；位置：相对；
— RationalRabbit
0

如果您使用的是jQuery UI，则它们已经有一个类，该类的作用只是一个魅力 而已。<div>在要扩展的div的底部height:auto;添加一个类，然后添加一个类名ui-helper-clearfix或使用此样式属性，并如下所示添加：

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

将jQuery UI类添加到clear div，而不是要扩展的div。

— 卢卡斯·奥利维拉（Lucas M.Oliveira）
source
0

我知道这是一种旧线程，但是，可以通过min-heightCSS属性以一种干净的方式实现这一点，因此，这里我将其留作以后参考：

我根据此处的OP发布代码创建了一个小提琴：http : //jsfiddle.net/U5x4T/1/，当您在其中删除并添加div时，您会注意到容器如何扩大或减小大小

除了OP代码外，您仅需完成以下两项操作即可：

*主容器中的溢出（浮动div必需）

* min-height css属性，可在此处获取更多信息：http : //www.w3schools.com/cssref/pr_dim_min-height.asp

— 胡安·卡洛斯·阿尔皮萨尔·钦奇利亚
source
0

添加了display：inline到div，当高度内容大于设置的div高度200px时，它会自动增长（而不是滚动的东西）

— 耶勒
source
1
这不是这个问题的明确答案。备注，请使用注释功能。
— ksbg 2015年
0

您可以使用CSS Grid Layout。目前支持范围非常广泛：请在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
— 沙里科夫·弗拉迪斯拉夫
source
0

我几乎尝试了上面列出的所有建议，但没有一个起作用。但是，“ display：table”对我有用。

— 傍神
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.