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

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 标签将自动适应内部内容的高度：

height: fit-content;

Answer 5

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

overflow: hidden;
height: 1%;

Answer 6

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

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

这可以附加到您的css文件中的prime div(例如warpper,但不会body或html导致页面不会向下滚动)并由其他子类继承并写入它们overflow: inherit;属性.

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

这个解决方案非常有效

• firefox 18+
• chorme 24+
• 即9+
• 歌剧12+

我没有在这些浏览器的早期版本上测试它.如果有人会检查它,那将是很好的.

Answer 7

只需使用以下

height:auto;