如何根据其中的内容自动调整高度?[英]How to auto adjust the height according to content in it? 本文翻译自 OM The Eternity 查看原文 2010-05-27 252914 css/

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>

我有一个

，需要根据里面的内容自动调整。我该怎么做呢?现在我的内容来自

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;
}

19 个解决方案

#1

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>

#2

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

只写“最小高度:XXX;”和“溢出:隐藏的;”你就不会遇到这样的问题了

min-height: 100px;
overflow: hidden;

#3

Just write:

只写:

min-height: xxx;
overflow: hidden;

then div will automatically take the height of the content.

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

#4

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

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

overflow: hidden;
height: 1%;

#5

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 body or html cause 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: inheritance;属性。

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

注意:奇怪的是，我的netbeans 7.2.1 IDE突出溢出:继承;当意外值令牌继承但所有现代浏览器读这个属性很好。

This solution work very well into

这种解决办法很管用

firefox 18+
firefox 18 +
chorme 24+
chorme 24 +
ie 9+
ie 9 +
opera 12+
歌剧12 +

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

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

#6

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.

完成了。

#7

Don't set height. Use min-height and max-height instead.

不设置高度。使用最小高度和最大高度。

#8

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

只需将高度设置为auto，就可以解决这个问题，因为div是块元素，所以它们可以将所有包含在其中的元素的宽度和高度都拉伸到最大。如果高度设置为auto而不工作，那么简单的不要添加高度，它应该调整并确保div不继承它的父元素的任何高度……

#9

Simple answer is to use overflow: hidden and min-height: x(any) px which will auto-adjust the size of div.

简单的答案是使用溢出:隐藏和最小高度:x(任意)px，它将自动调整div的大小。

The height: auto won't work.

高度:自动停止工作。

#10

just use following

只使用后

height:auto;

#11

Set a height to the last placeholder div.

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

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

#12

Min- Height : (some Value) units

---- Use only this incase of elements where you cannot use overflow, like tooltip

---- -只在不能使用溢出的元素的情况下使用这个incase，如工具提示

Else you can use overflow property or min-height according to your need.

还可以根据需要使用溢出属性或最小高度。

#13

You could try, div tag will auto fit height with content inside:

你可以试试，div标签会自动贴合高度，里面有内容:

height: fit-content;

#14

<div> should expand automatically. I guess that the problem is that you're using fixed height:100px;, try replacing it with min-height:100px;

< div >自动扩大。我猜问题是你用的是固定高度:100px;试着用最小高度:100px代替;

#15

use min-height instead of height

用最小的高度代替高度

#16

I have fixed my issue by setting the position of the element inside a div to relative;

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

#17

I just used

我只是用

overflow: hidden;

And it was worked for me properly. This div had some of float lefted divs.

这对我很有效。这个div有一些左对齐的div。

#18

height:59.55%;//First specify your height then make overflow auto overflow:auto;

高度:59.55%;//先指定高度，再进行溢流自动溢流:自动;

#19

-1

Just use this display type:

使用这种显示类型:

display: inline-block;

#1