設(shè)置DIV最小高度以及高度自適應(yīng)隨著內(nèi)容的變化而變化
發(fā)布時間:2014-09-03 10:12:13 作者:佚名
我要評論

希望DIV的高度會隨著內(nèi)容的變化而變化,但是又想設(shè)置DIV的一個最小高度,特別是當(dāng)DIV有背景色或背景圖片時最小高度的設(shè)置會使視覺效果更好
在應(yīng)用DIV布局時,有時會希望DIV的高度會隨著內(nèi)容的變化而變化,但是又想設(shè)置DIV的一個最小高度,特別是當(dāng)DIV有背景色或背景圖片時最小高度的設(shè)置會使視覺效果更好。可以通過如下屬性的設(shè)置達(dá)到效果:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設(shè)置div最小高度及高度自動伸展的實例</title>
<style>
.divHeight{height:400px;height:auto;min-height:500px;width:800px; background:#bbeeeb;margin:0 auto;}
</style>
</head>
<body>
<div class="divHeight">
此div具有最小高度且高度可以隨著內(nèi)容的增高而自動伸展
</div>
</body>
</html>
復(fù)制代碼
代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設(shè)置div最小高度及高度自動伸展的實例</title>
<style>
.divHeight{height:400px;height:auto;min-height:500px;width:800px; background:#bbeeeb;margin:0 auto;}
</style>
</head>
<body>
<div class="divHeight">
此div具有最小高度且高度可以隨著內(nèi)容的增高而自動伸展
</div>
</body>
</html>
相關(guān)文章
獨行DIV自適應(yīng)寬度布局CSS實例與應(yīng)用范圍
這篇文章主要為大家介紹了通過DIV CSS實例CSS自適應(yīng)寬度布局方法,再過常見用處介紹充分掌握自適應(yīng)獨占一行一列的布局技巧,需要的朋友可以參考下2014-10-09CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13CSS 實現(xiàn)div寬度根據(jù)內(nèi)容自適應(yīng)
最近做了個項目,其中有項目需求是需要div根據(jù)內(nèi)容進(jìn)行寬度自適應(yīng)。下面小編給大家分享一段代碼關(guān)于CSS 實現(xiàn)div寬度根據(jù)內(nèi)容自適應(yīng) 的相關(guān)知識,需要的朋友參考下2016-01-28