Html CSS 使内容 DIV 在内容之后自动调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8389643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Making the content DIV Auto size after the content within
提问by Teknikk
I am currently trying to design a website template for me, the problem is that I can't get the Content div to auto expand on the content that is within it.
我目前正在尝试为我设计一个网站模板，问题是我无法让 Content div 自动扩展其中的内容。
I wanted it to auto resize so I don't need to set the CSS height manually.
我希望它自动调整大小，所以我不需要手动设置 CSS 高度。
The CSS Code I have made:
我制作的 CSS 代码：
#Container {
position: relative;
width: 800px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: de;
border-left: 1px solid #000001;
border-right: 1px solid #000001;
border-top: 1px solid #000001;
border-bottom: 1px solid #000001;
background-color: #C1E9FF;
}
#LogoContainer {
background-image: url('/media/Logo.png');
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: rgb(0,0,1);
border-bottom-color: rgb(0,0,1);
border-right-style: solid;
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
z-index: 1;
}
#LikeBar {
border-bottom-width: 1px;
border-bottom-color: rgb(0,0,1);
border-bottom-style: solid;
width: 400px;
height: 50px;
position: absolute;
left: 400px;
z-index: 1;
}
#ButtonHome {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
top: 50px;
z-index: 1;
}
#ButtonVideo {
background-image: url('/media/Bt.png');
width: 100px;
height: 30px;
position: absolute;
left: 105;
top: 50px;
z-index: 1;
}
#Footer {
border-top-width: 1px;
border-top-color: rgb(0,0,1);
border-top-style: solid;
width: 800px;
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
}
#Content {
position: absolute;
top: 90px;
width: 800px;
height: 95%;
border-top: 1px solid #000001;
}
#YouTubeBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 10px;
text-align: center;
}
#TwitterBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 110px;
text-align: center;
}
#FaceBookBox {
position: absolute;
background-image: url('/media/Box.png');
width: 100px;
height: 30;
left: 210px;
text-align: center;
}
.DivT { line-height: 1px }
HTML Code with the DIV
带有 DIV 的 HTML 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>HTML CODE</title>
<meta name="description" content="Null" />
<meta name="keywords" content="Null" />
<link href="ThemeV1.css" rel="stylesheet" type="text/css" />
</head>
<body background="/media/Background.png">
<div id="Container">
<!-- Start Container -->
<div id="LogoContainer"></div>
<div id="LikeBar"></div><!-- Menu Controls -->
<div id="ButtonHome"></div><!-- WEBSITE CONTENT -->
<div id="Content">
<p class="DivT">We're upgrading the website with a new design and hopefully it will
be faster, so check back later.</p>
</div><!-- END WEBSITE CONTENT -->
<!-- Footer -->
<div id="Footer"></div><!-- End Footer -->
</div><!-- End Container -->
</body>
</html>
So, what is wrong? I want to save time to not set the height manually.
那么，有什么问题呢？我想节省时间而不是手动设置高度。
回答by Aaron
Since your div#Contentis absolutely positioned within div#Container, the container will ignore the height and width of the content when determining its own dimensions. Try giving div#Contenta positionvalue of relative. Then, as mentioned in the comments above, switch its heightproperty to min-height. If you need to stick with absolute positioning and still want a content-affected height, you'll have to use JavaScript to adjust the style.heightof the containing div when the height of the content div changes.
由于您div#Content的绝对定位在 内div#Container，因此容器在确定其自身尺寸时将忽略内容的高度和宽度。尝试给出div#Content的position值relative。然后，如上面的评论中所述，将其height属性切换为min-height. 如果您需要坚持使用绝对定位并且仍然想要一个受内容影响的高度，则style.height当内容 div 的高度发生变化时，您必须使用 JavaScript 来调整包含 div 的 。
回答by Paul D. Waite
It looks like you haveset the height of your content height manually:
看起来您已经手动设置了内容高度的高度：
#Content {
...
height: 95%;
Remove the height, and its height will be whatever is necessary to hold its (non-floated) contents.
删除height，其高度将是保持其（非浮动）内容所需的高度。
回答by CBRRacer
If you want something to re-size then a div without any height attribute set automatically re-sizes to the height of the content contained with in it. If you want it to be at least XXXpx tall or fit the screen a certain way then use the min-height attribute. That will fix the height so that it displays in the desired area if the text is too small and will expand if the text is larger than the minimum setting.
如果您想要调整某些内容的大小，则没有设置任何高度属性的 div 会自动将大小调整为其中包含的内容的高度。如果您希望它至少有 XXXpx 高或以某种方式适合屏幕，请使用 min-height 属性。这将固定高度，以便在文本太小时显示在所需区域，如果文本大于最小设置，则将扩展。
You have so many heights described here that I am not going to go into all of them but I would adjust these at minimum:
这里描述的高度太多了，我不打算全部介绍，但我至少会调整这些：
#Container { min-heigh: 100%;}
#Content { min-height: 95%; }
*Note - min-height and min-width are not supported by IE6;
*注意 - IE6 不支持 min-height 和 min-width；
Also the positioning of the elements can cause a lot of issues with your height as they can take the element out of the standard flow of datat, and it's not really necessary if you set your layout properly unless you need to do something specific like setting a z-index or wanting a fixed background that scrolls with the site.
此外，元素的定位可能会导致您的高度出现很多问题，因为它们可以将元素从数据的标准流中取出，并且如果您正确设置布局，则不是真的有必要，除非您需要做一些特定的事情，例如设置z-index 或想要一个固定的背景与网站一起滚动。
