如何根据内容自动调整<div>高度？

71

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

我用于div的类如下

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

css html

— OM永恒
source

1

Height：auto都不适合我，min-height都不适合我；我正在使用mozilla firefox，最新版本

— OM The Eternity

45

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

.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>

展开摘要

— 巴里读者
source

15

如果有人还在使用IE6其自己的过错及其破碎...... <<我可能会认为，但我还是要支持垃圾......或者至少是内容具有生存....

— WalterJ89

6

我同意Walterj89的观点，但是我也不同意-至少在IE9正常发布之前，应该支持IE6 。一般来说，我认为没有人应该支持IE。

— Barrie Reader

1

Height：auto都不适合我，min-height都不适合：我正在使用mozilla firefox，最新版本

— OM The Eternity 2010年

这在我的FireFox 3.6和IE8上可以正常工作-您正在运行哪个版本的FireFox？

— Barrie Reader

我不知道为什么，但是突然间它给了我我需要的输出。.谢谢您的帮助……

— OM Eternal Eternal

82

只需输入“最小高度：XXX；” 而“溢出：隐藏”；＆你将摆脱这个问题

min-height: 100px;
overflow: hidden;

— 阿迪
source

整洁的技巧，谢谢。一方面的问题。如果我使用PHP或AJAX向页面中添加更多内容，这是否仍能正常工作，页面会扩展以适合内容高度吗？

— Isuru

1

我从事这项工作已有10年了，而我一直都在想解决/预防这个问题！太感谢了！

— 奥利弗·格里奇

这是我的荣幸朋友。

— 阿迪2014年

我很想了解这种违反直觉的解决方案的原理。CSS如何证明overflow: hidden;让我看到更多东西？（在我的情况下，如果没有它，包含的块将缩小到其高度，并且内容在底部被截断。）

— Bob Stein

2

即使这对我也不起作用。设置最小高度和/或溢出：隐藏对我不起作用。股利只是不扩大。

— 阿努帕姆

19

写就好了：

min-height: xxx;
overflow: hidden;

然后div将自动获取内容的高度。

— 温彻斯特
source

14

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

overflow: hidden;
height: 1%;

— 克莱顿
source

9

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

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

这可以附加到css文件中的质数div（例如，warpper，但不附加body或html导致页面无法向下滚动），并由其他子类继承并写入它们的overflow: inherit;属性。

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

该解决方案非常适合

Firefox 18+
chorme 24+
即9+
歌剧12+

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

— 埃格尔
source

3

只需使用以下

height:auto;

— 萨利尔
source

很好的答案，尽管除非树中更高的声明有冲突，否则默认情况下height将暗示auto。

— Delan Azabani 2010年

Height：auto都不适合我，min-height都不适合我：我正在使用mozilla firefox，最新版本

— OM The Eternity

-ve给了我我不想要的垂直滚动条

— 永恒之

3

如果您还没有答案，请输入“ float：left;”。搞砸了你想要的。在HTML中，在已应用浮动标记的结束标记下创建一个容器。对于此容器，请包括以下样式：

#container {
clear:both;
}

做完了

— 汤玛士
source

3

不要设定height。使用min-height和max-height代替。

— 德兰·阿扎巴尼（Delan Azabani）
source

Height：auto都不适合我，min-height都不适合我：我正在使用mozilla firefox，最新版本

— OM The Eternity

3

您可以尝试，div标签将自动调整内部内容的高度：

height: fit-content;

— 黄
source

2

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

— 白马王子
source

2

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

该height: auto会无法正常工作。

— 穆罕默德·沙纳瓦兹·阿拉姆
source

1

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

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

— 孙卡伦
source

1

Min- Height : (some Value) units

----仅在无法使用溢出的元素的情况下使用此提示，例如工具提示

另外，您可以根据需要使用溢出属性或最小高度。

— 鲁德雷什·阿杰冈卡
source

1

我刚用过

overflow: hidden;

它为我正确地工作了。该div有一些浮动左div。

— Thejan Ranathunge
source

也为我工作。我将其与height：auto;结合在一起；并显示：块;

— kintsukuroi

0

<div>应该会自动展开。我想问题是您使用的是fixed height:100px;，请尝试将其替换为min-height:100px;

— TomaszZieliński
source

Height：auto都不适合我，min-height都不适合我：我正在使用mozilla firefox，最新版本

— OM The Eternity

就像Neurofluxation所说的那样，您需要具有.或#之前box-centerside要匹配类或ID。目前，您的代码与节点名的元素匹配box-centerside-其中不存在任何元素。

— Delan Azabani 2010年

我知道此代码是从Firebug复制而来的，因此不会显示为“。”。

— OM《永恒》，2010年

0

用min-height代替height

— 帕万
source

0

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

— MadeInDreams
source

0

height：59.55％; //首先指定您的身高，然后使溢出自动溢出：自动;

— Bilisuma Mekonnen
source

0

对我来说，以下所有CSS都可以正常工作：

float: left; width: 800px;

在将元素放入CSS文件之前，请先检查chrome以尝试使用chrome。

— 斯里哈里·卡兰斯（Srihari Karanth）
source

0

这些大多数都是很好的答案，但我认为它们遗漏了Web开发的一个不可避免的方面，即正在进行的页面更新。如果您想过来向该div添加内容怎么办？您是否应该总是来调整div的最小高度？好吧，在尝试回答这两个问题时，我尝试了以下代码：

.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 */
}

我的意见是，我发现这种网格方法可以显示更多适合响应式网站的内容。否则，有许多方法可以实现相同的目标。但是编程的一些重要目标是使编码更简单，更易读和更容易理解。

— 克莱姆·劳埃德·姆温亚
source