如何根據內容調整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的高度？

回答

相關問題