使div的高度随其内容而扩大

24 回答

• 5

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

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

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

  http://www.w3schools.com/cssref/pr_class_clear.asp：了解更多信息

  回复于 2024-04-29T22:05:30+08:00
• 4

  浮动元素不占据父元素内部的空间，顾名思义它们浮动！因此，如果明确没有向其子元素浮动的元素提供高度，则父元素将显示为收缩并且似乎不接受子元素的维度，如果其子元素的给定 overflow:hidden; 可能不会出现在屏幕上 . 有多种方法可以解决这个问题：

  • 使用 clear:both; 属性在浮动元素下插入另一个元素，或在浮动元素的 :after 上使用 clear:both; .

  • 使用 display:inline-block; 或 flex-box 而不是 float .

  回复于 2024-04-29T22:05:30+08:00
• 2

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

  .clear { clear: both; }
  

  Update: 这个问题仍然得到了相当多的流量，所以我想用一个现代的替代方案使用_2569620更新答案：

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

  回复于 2024-04-29T22:05:30+08:00
• 209

  试试这个： overflow: auto;

  它适用于我的问题..

  回复于 2024-04-29T22:05:30+08:00
• 8

  添加以下内容：

  overflow:hidden;
  height:1%;
  

  到你的主要div . 消除了额外
的需要 .

  回复于 2024-04-29T22:05:30+08:00
• 1

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

  display:table;
  

  jsFiddle

  回复于 2024-04-29T22:05:30+08:00
• 56

  我会用的

  height: auto;
  

  在你的div . 是的，我知道我迟到了一点但是我觉得这可能有助于像这样的人会帮助我 .

  回复于 2024-04-29T22:05:30+08:00
• 1

  以下应该工作：

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

  回复于 2024-04-29T22:05:30+08:00
• 3

  使用附加了 display:inline-block css的span标记 . 然后你可以使用CSS并以很多方式操作它，但如果你不包含 width 或 height ，它会根据其内容进行扩展和缩进 .

  希望有所帮助 .

  回复于 2024-04-29T22:05:30+08:00
• 0

  通常我认为这可以通过在 #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; }
  

  回复于 2024-04-29T22:05:30+08:00
• 0

  当父Div的子元素浮动时会出现此问题 . 这是问题的 Latest Solution ：

  在CSS文件中编写以下类，名为 .clearfix ，同时使用伪选择器 :after

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

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

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

  它总是应该工作 . 您可以将类名称称为.group而不是.clearfix，因为它将使代码更具语义 . 请注意，不必在双引号“”之间的Content值中添加点或甚至空格 . 此外， overflow: auto; 可能会解决问题，但它会导致其他问题，如显示滚动条，不建议 .

  资料来源：Lisa Catalano和Chris Coyier的博客

  回复于 2024-04-29T22:05:30+08:00
• 21

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

  回复于 2024-04-29T22:05:30+08:00
• 0

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

  { position:absolute }
  

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

  回复于 2024-04-29T22:05:30+08:00
• 6

  看起来像这样

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

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

  回复于 2024-04-29T22:05:30+08:00
• 6

  我将Bootstrap添加到一个带有 section 标签的项目中，我将其设置为屏幕高度的100％ . 它运作良好，直到我使项目响应，此时我借用了jennyfofenny's answer的一部分，所以我的部分背景匹配内容的背景，当屏幕尺寸在较小的屏幕上更改 .

  我的新 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;
  }
  

  让's say you'得到一个特定颜色的部分 . 通过使用 min-height ，如果部分的宽度因较小的屏幕而缩小，则部分的高度将会扩大，内容将保持在部分，你的背景将保持所需的颜色 .

  回复于 2024-04-29T22:05:30+08:00
• 0

  你尝试过传统方式吗？给主容器高度：auto

  #container{height:auto}
  

  我使用过这个，它和我一起工作了很多次 .

  回复于 2024-04-29T22:05:30+08:00
• 4

  我自己在一个项目中遇到了这个问题 - 我在一个div内部有一个 table ，它从div的底部溢出 . 我尝试过的高度修正都没有，但我找到了一个奇怪的修复方法，那就是在div的底部放一个段落，只有一段时间 . 然后将文本的“颜色”设置为与容器的背景相同 . 随心所欲地工作，不需要javascript . 不间断的空间不起作用 - 透明图像也不起作用 .

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

  这是让设计师采用基于表格的布局的一种方式 - 我花费了大量时间来解决这些问题并使其跨浏览器兼容让我疯狂 .

  回复于 2024-04-29T22:05:30+08:00
• 80

  我试过这个并且它有效

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

  回复于 2024-04-29T22:05:30+08:00
• 256

  如果你正在使用jQuery UI，他们已经有一个类只是一个魅力添加_b69668_在你想要扩展的div内部 height:auto; 然后添加一个类名称ui-helper-clearfix或使用此样式属性并添加只是如下：

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

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

  回复于 2024-04-29T22:05:30+08:00
• 0

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

  我在这里根据OP发布的代码制作了一个小提琴：http://jsfiddle.net/U5x4T/1/，当您删除并添加内部div时，您会注意到容器如何扩展或缩小

  除了OP代码之外，您需要实现此目的的唯一两件事是：

  *主容器溢出（浮动div需要）

  • min-height css属性，这里有更多信息：http://www.w3schools.com/cssref/pr_dim_min-height.asp

  回复于 2024-04-29T22:05:30+08:00
• 2

  添加了显示：内联到div并且当高度内容变大然后设置div高度为200px时它自动增长（不是滚动的东西）

  回复于 2024-04-29T22:05:30+08:00
• 14

  很简单的方法

  在父DIV上：

  height: 100%;

  这对我每次都有用

  回复于 2024-04-29T22:05:30+08:00
• 2

  你可以使用CSS Grid Layout . 目前支持相当广泛：在caniuse上查看 .

  这是jsfiddle上的example . 还有example有很多文字的东西 .

  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
  

  回复于 2024-04-29T22:05:30+08:00
• -3

  不需要使用很多CSS，只需使用bootstrap，然后使用：

  class="container"
  

  对于需要填补的div .

  You can get bootstrap from here

  回复于 2024-04-29T22:05:30+08:00