如何根据内容调整div的高度？

我是新来的，目前我正在做一个项目，我坚持这一点。主div内有3个div。而且我必须根据内容自动调整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">&nbsp;</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>

来源

2015-09-28 Syam Sree

autoadjust'height'其中'div'？ –

我想调整主divcorcorners2的高度。 –

调整到哪个“高度”？看到这里是** [DEMO]（https://jsfiddle.net/Guruprasad_Rao/6s2g0h2m/）**我已经使用你的代码创建了..你能告诉我什么应该是'div'的高度' ？ –

要根据内容进行调整，对于该分区使用的min-height一个CSS的股利。

例子：

.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">&nbsp;</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>

替换高度最小高度，通过使用高度属性，告诉浏览器限制的div那个特定的高度并没有超出它。因此用最小高度属性替换它会使您的div灵活地根据其内容进行设置。

有了这个你的div将始终有一个最小高度为450px，并将根据放入其中的内容扩展它的高度。

我希望它能为你做好这项工作。如果不是，请评论。

来源

2015-09-28 05:24:09

Thnks为您的答案。我没有为我工作。我向内容溢出的desc div添加额外的内容。 –

感谢您的答复。但同样的结果正在显示。它没有为我工作。我将其改为最小高度，并为其添加额外内容。并且内容溢出。 –

这是绝对不允许它工作的位置。 –

如何根据内容调整div的高度？

回答

相关问题