div高度自適應
第一種：php
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
.mytest
{
width:100px;
height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">據英國《每日電訊報》11月30日報道，以色列安全內閣當天批准在約旦河西岸和東耶路撒冷猶太人定居點新建3000套住房，此舉旨在抗議聯合國29日批准給與巴勒斯坦觀察員國地位。巴以和談進程也所以蒙上巨大</div>
</body>
</html>css
第二種：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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
.mytest
{
width:100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="mytest">據英國《每日電訊報》11月30日報道，以色列安全內閣當天批准在約旦河西岸和東耶路撒冷猶太人定居點新建3000套住房，此舉旨在抗議聯合國29日批准給與巴勒斯坦觀察員國地位。巴以和談進程也所以蒙上巨大陰</div>
</body>
</html>瀏覽器
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代碼中，父元素只規定了寬度沒有規定高度，子元素在正常的文檔流中，因此子元素可以將父元素撐開。
再看下面這一實例:安全
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
從上面代碼的運行能夠看出，父元素並無被撐開，這個是由於子元素float屬性值設置爲left，從而脫離了文檔流。若是想讓上面的父元素達到高度自適應，就要清除子元素的浮動。修改代碼以下:ui
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
overflow:hidden;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
以上代碼經過給父元素的樣式中添加overflow:hidden便可清除浮動。
若是說父元素就像最開始的例子同樣，固定了高度，而且還要實現高度自適應效果，就能夠參閱元素中內容是文本的狀況，解決方法是同樣的。代碼以下:spa
- 1. div高度自適應
- 2. div自適應高度height
- 3. HTML-父類div高度自適應子類div的高度
- 4. div模擬textarea自適應高度
- 5. div自適應剩餘高度，css
- 6. CSS實現div高度自適應
- 7. div 自適應高度 自動填充剩餘高度
- 8. div自適應寬度
- 9. DIV默認高度且自適應高度
- 10. DIV嵌套,外層DIV高度自適應
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • 自定義TypeHandler - MyBatis教程
- • 適用於PHP初學者的學習線路和建議
- • 算法總結-廣度優先算法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. div高度自適應
- 2. div自適應高度height
- 3. HTML-父類div高度自適應子類div的高度
- 4. div模擬textarea自適應高度
- 5. div自適應剩餘高度，css
- 6. CSS實現div高度自適應
- 7. div 自適應高度 自動填充剩餘高度
- 8. div自適應寬度
- 9. DIV默認高度且自適應高度
- 10. DIV嵌套,外層DIV高度自適應