我是新手，目前我正在做一个项目，我坚持这个。我在主div里面有3个div。我必须根据内容自动调整div的高度。任何人都可以为此提出解决方案。代码是
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners2 {
position: absolute;
border-radius: 25px;
border: 2px solid #d3dce2;
padding: 20px;
width: 722px;
height:450px;
left: 151px;
top: 64px;
}
#img {
position: absolute;
width: 266px;
height: 260px;
left: 32px;
top: 42px;
}
#desc {
position: absolute;
font-size: 16px;
padding: 5px 15px 5px 5px;
width: 373px;
left: 321px;
top: 42px;
height: 100%;
line-height:1.6;
}
.vr {
width: 2px;
background-color: #d3dce2;
position: absolute;
top: 5px;
bottom: 50px;
left: 310px;
height: 317px;
}
</style>
</head>
<body>
<p>Rounded corners for an element with a border:</p>
<div id="rcorners2">
<div id="img">
<img src="SLT-A99V_wSAL2470Z_lg.jpg" height="260px" width="265">
</div>
<div class="vr"> </div>
<div id="desc">
Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
要根据内容调整的div，对于该div，使用CSS min-height。
示例：
.contentDiv{
min-height:400px;
}
在您的情况中，它将是
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners2 {
position: absolute;
border-radius: 25px;
border: 2px solid #d3dce2;
padding: 20px;
width: 722px;
min-height:450px;
left: 151px;
top: 64px;
}
#img {
position: absolute;
width: 266px;
height: 260px;
left: 32px;
top: 42px;
}
#desc {
font-size: 16px;
padding: 5px 15px 5px 5px;
width: 373px;
height: 100%;
line-height: 1.6;
margin-left: 321px;
}
.vr {
width: 2px;
background-color: #d3dce2;
position: absolute;
top: 5px;
bottom: 50px;
left: 310px;
height: 317px;
}
</style>
</head>
<body>
<p>Rounded corners for an element with a border:</p>
<div id="rcorners2">
<div id="img">
<img src="SLT-A99V_wSAL2470Z_lg.jpg" height="260px" width="265">
</div>
<div class="vr"> </div>
<div id="desc">
Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
</div>
</div>
</body>
</html>
使用height属性将高度替换为min-height，告诉浏览器将div限制为特定高度，而不是超出它。因此，用最小高度属性替换它将使您的div灵活地根据其内容进行设置。
这样你的div将始终具有450px的最小高度，并将根据你放入其中的内容扩展它的高度。
我希望它能帮到你。如果没有，请发表评论。