Question

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

我用于div的课程如下

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

Answer 1

只需写下“min-height：XXX;”并且“溢出：隐藏;” ＆安培;你将摆脱这个问题喜欢这个

min-height: 100px;
overflow: hidden;

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

Answer 3

只需写下：

min-height: xxx;
overflow: hidden;

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

Answer 4

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

overflow: hidden;
height: 1%;

Answer 5

我已经做了一些事情来自动调整我的项目的高度，我想我找到了一个解决方案

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

这可以附加到prime div（例如warpper，但不会body或html，因为页面不会向下滚动）在css文件中并由其他子类继承并写入overflow: inherit;属性。

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

此解决方案非常适用于

firefox 18 +
chorme 24 +
即9 +
opera 12 +

我不会在以前版本的浏览器上测试它。如果有人会检查它，那就太好了。

Answer 6

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

Answer 7

如果你还没有得到答案，你的“浮动：离开;”弄乱了你想要的东西。在您的HTML中，在已应用浮动的结束标记下方创建一个容器。对于此容器，请将其包含为您的样式：

#container {
clear:both;
}

完成。

Answer 8

只需将高度设置为auto即可解决问题，因为div是块元素，因此它们会伸展到包含在其中的任何元素的整个宽度和高度。如果高度设置为自动不工作然后简单不添加高度，它应该调整并确保div不继承它的父元素的任何高度......

Answer 9

只需使用以下

height:auto;

Answer 10

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

height: auto赢了。

Answer 11

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

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

Answer 12

Min- Height : (some Value) units

----仅使用这些不能使用溢出的元素，例如工具提示

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

Answer 13

我刚用过

overflow: hidden;

这对我有用。这个div有一些漂浮的div。

Answer 14

您可以尝试，div标签将自动适应内容中的高度：

height: fit-content;

Answer 15

使用min-height代替height

Answer 16

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

Answer 17

我已经通过将div中元素的位置设置为relative来解决了我的问题;

Answer 18

身高：59.55％; //首先指定你的身高然后自动溢出溢出：汽车;

Answer 19

在尝试了以下CSS的所有功能后，对我而言：

float: left; width: 800px;

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

Answer 20

大多数都是很好的答案，但我认为它们遗漏了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 */
}

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

Answer 21

无需再设置诸如min-height，只要设置好即可：

overflow: hidden

Answer 22

只需使用此显示类型：

display: inline-block;

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

22 个答案: