如何根据其中的内容自动调整 <div> 的高度？答案

【问题标题】：How to auto adjust the <div> height according to content in it?如何根据其中的内容自动调整 <div> 的高度？
【发布时间】：2010-05-27 10:03:23
【问题描述】：

我有一个<div>，需要根据其中的内容进行自动调整。我怎样才能做到这一点？现在我的内容来自<div>

我用的div类如下

box-centerside  {
background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
float:left;
height:100px;
width:260px;
}

【问题讨论】：

Height:auto 都不适合我，min-height: 也不适合我，我使用的是 mozilla firefox，最新版本

标签： css html

【解决方案1】：

只要写“最小高度：XXX;”和“溢出：隐藏；” &你将摆脱这个问题像这样

min-height: 100px;
overflow: hidden;

【讨论】：

绝招，谢谢。一方面的问题。如果我使用 PHP 或 AJAX 在页面中引入更多内容，这是否仍然有效，页面会扩展以适应内容高度吗？
我从事这项工作已经 10 年了，我一直在想解决/预防这个问题！谢谢一百万！
朋友们，我很高兴。
我很想了解这种违反直觉的解决方案的基本原理。 CSS 如何证明 overflow: hidden; 让我看到更多的东西？（在我的例子中，没有它，包含块会缩小到它的高度，并且内容在底部会被截断。）
即使这对我也不起作用。设置最小高度和/或溢出：隐藏对我不起作用。 div 只是没有扩展。

【解决方案2】：

尝试使用以下标记而不是直接指定高度：

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  min-height: 100px;
  width: 260px;
}

<div class="box-centerside">
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
</div>

【讨论】：

如果有人还在使用ie6，那是他们自己的错，它坏了……
我同意 Walterj89，但我也不同意 - IE6 应该至少在 IE9 正常发布之前得到支持。总的来说，我认为没有人应该支持 IE。
Height:auto 都不适合我，min-height: 也不适合我，我使用的是 mozilla firefox，最新版本
这在我的 FireFox 3.6 和 IE8 上运行良好 - 你运行的是哪个版本的 FireFox？
我不知道为什么，但突然间它给了我我需要的输出......谢谢你的帮助......

【解决方案3】：

只写：

min-height: xxx;
overflow: hidden;

那么div会自动取内容的高度。

【讨论】：

【解决方案4】：

我在需要调整大小的 DIV 中使用了以下内容：

overflow: hidden;
height: 1%;

【讨论】：

【解决方案5】：

我已经为我的项目自动调整高度，我想我找到了解决方案

[CSS]
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;

这可以附加到您的css文件中的主要div（例如warpper，但不能附加到body或html，因为页面不会向下滚动）并由其他子类继承并写入它们@987654325 @ 属性。

注意：奇怪的是我的 netbeans 7.2.1 IDE 将 overflow: inherit; 突出显示为 Unexpected value token inherit，但所有现代浏览器都可以正常读取此属性。

这个解决方案非常适合

火狐18+
chorme 24+
即9+
歌剧 12+

我没有在这些浏览器的早期版本上测试它。如果有人会检查它，那就太好了。

【讨论】：

【解决方案6】：

只需使用以下

height:auto;

【讨论】：

很好的答案，但除非在树的较高层有冲突的声明，否则height 将默认为auto。
Height:auto 都不适合我，min-height: 也不适合我，我使用的是 mozilla firefox，最新版本
-ve 给我垂直滚动条，我不想要

【解决方案7】：

你可以试试，div 标签会根据里面的内容自动调整高度：

height: fit-content;

【讨论】：

【解决方案8】：

如果你还没有得到答案，你的“float:left;”搞砸了你想要的。在您的 HTML 中，在应用了浮动的结束标签下方创建一个容器。对于此容器，请将其作为您的样式：

#container {
clear:both;
}

完成。

【讨论】：

【解决方案9】：

不要设置height。请改用min-height 和max-height。

【讨论】：

Height:auto 都不适合我，min-height: 也不适合我，我使用的是 mozilla firefox，最新版本

【解决方案10】：

只需将高度设置为自动，这应该可以解决问题，因为 div 是块元素，因此它们会延伸到其中包含的任何元素的全宽和全高。如果高度设置为自动不起作用，那么简单地不要添加高度，它应该调整并确保 div 也没有从它的父元素继承任何高度......

【讨论】：

【解决方案11】：

简单的答案是使用overflow: hidden 和min-height: x(any) px，这将自动调整 div 的大小。

height: auto 不起作用。

【讨论】：

【解决方案12】：

为最后一个占位符 div 设置高度。

    <div class="row" style="height:30px;">
    <!--placeholder to make the whole block has valid auto height-->

【讨论】：

【解决方案13】：

Min- Height : (some Value) units

---- only 使用这种无法使用溢出的元素，例如 tooltip

否则你可以根据需要使用溢出属性或min-height。

【讨论】：

【解决方案14】：

我刚用过

overflow: hidden;

它对我很有效。这个 div 有一些浮动的左 div。

【讨论】：

也为我工作。我将它与 height:auto;并显示：阻止；

【解决方案15】：

<div> 应该会自动展开。我想问题是你使用的是固定的height:100px;，尝试用min-height:100px;替换它

【讨论】：

Height:auto 都不适合我，min-height: 也不适合我，我使用的是 mozilla firefox，最新版本
就像 Neurofluxation 所说，您需要在 box-centerside 之前有 . 或 # 以匹配类或 ID。目前，您的代码与节点名称 box-centerside 的元素匹配 - 其中不存在。
我知道这段代码是从 firebug 复制过来的，因此没有显示为“.”

【解决方案16】：

使用min-height 代替height

【讨论】：

【解决方案17】：

我已通过将 div 中元素的位置设置为相对位置来解决我的问题；

【讨论】：

【解决方案18】：

height:59.55%;//首先指定你的高度然后让溢出自动溢出：自动；

【讨论】：

【解决方案19】：

对我来说，在尝试了以下 css 的所有工作后：

float: left; width: 800px;

通过在将元素放入 css 文件之前检查元素来尝试使用 chrome。

【讨论】：

【解决方案20】：

其中大部分都是很好的答案，但我觉得它们忽略了 Web 开发中一个不可避免的方面，即持续的页面更新。如果你想来给这个div添加内容怎么办？你应该总是来调整div min-height吗？好吧，在尝试回答这两个问题时，我尝试了以下代码：

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  height: auto; /* adjusts height container element according to content */
  width: 260px;
}

此外，只是为了一种奖励，如果您在此 div 周围有具有类似 position: relative; 属性的元素，它们将因此堆叠在此 div 顶部，因为它具有属性 float: left; 为了避免这种堆叠，我尝试了以下代码：

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* number depends on how many columns you want for a particular screen width. */
  height: auto; /* adjusts height container element according to content */
}

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  height: auto; /* adjusts height container element according to content */
  width: 100%;
}

.sibling 1 {
  /* Code here */
}

.sibling 2 {
  /* Code here */
}

我的观点是，我发现这种显示方式更适合响应式网站。否则，有很多方法可以实现相同的目标；但编程的一些重要目标是让编码更简单、更易读、更容易理解。

【讨论】：

【解决方案21】：

min-height这样的设置不用再设置了，只要设置好就行了：

overflow: hidden

【讨论】：