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

How to auto adjust the <div> height according to content in it?

提问by OM The Eternity

I have a <div>which needs to be auto adjusted according to the content in it. How can I do this? Right now my content is coming out of the <div>

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

The class I have used for the div is as follows

我用于div的类如下

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

采纳答案by Barrie Reader

Try with the following mark-up instead of directly specifying height:

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

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

回答by Adi

Just write "min-height: XXX;" And "overflow: hidden;" & you will be out of this problem Like this

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

min-height: 100px;
overflow: hidden;

回答by Winchester

Just write:

写就好了：

min-height: xxx;
overflow: hidden;

then divwill automatically take the height of the content.

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

回答by Cleyton

I've used the following in the DIV that needs to be resized:

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

overflow: hidden;
height: 1%;

回答by Egel

I have made some reach to do auto adjust of height for my project and I think I found a solution

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

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

This can be attached to prime div(e.g. warpper, but not to bodyor htmlcause the page will not scroll down) in your css file and inherited by other child classes and write into them overflow: inherit;attribute.

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

Notice: Odd thing is that my netbeans 7.2.1 IDE highlight overflow: inherit;as Unexpected value token inheritbut all modern browser read this attribute fine.

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

This solution work very well into

该解决方案非常适用于

• firefox 18+
• chorme 24+
• ie 9+
• opera 12+

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

I do not test it on previous versions of those browsers. If someone will check it, it will be nice.

我不会在这些浏览器的早期版本上测试它。如果有人会检查它会很好。

回答by Thomas

If you haven't gotten the answer yet, your "float:left;" is messing up what you want. In your HTML create a container below your closing tags that have floating applied. For this container, include this as your style:

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

#container {
clear:both;
}

Done.

完毕。

回答by Delan Azabani

Don't set height. Use min-heightand max-heightinstead.

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

回答by Salil

just use following

只需使用以下

height:auto;

回答by Charming Prince

simply set the height to auto, that should fix the problem, because div are block elements so they stretch out to full width and height of any element contained in it. if height set to auto not working then simple don't add the height, it should adjust and make sure that the div is not inheriting any height from it's parent element as well...

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

回答by Mohammad Shahnawaz Alam

Simple answer is to use overflow: hiddenand min-height: x(any) pxwhich will auto-adjust the size of div.

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

The height: autowon't work.

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