DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> CSS兼容各浏覽器設置DIV最小高度
CSS兼容各浏覽器設置DIV最小高度
編輯:WEB前端代碼     
我們在用DIV+CSS布局文章內容頁面的時候,往往會讓DIV或其他元素自適應高度,可是當發布者發布的內容比較少的時候,比如只有一行字,那內容部分就變的很小,不美觀,可是我們直接設置一個高度的話,當內容很多時又會溢出,在這裡展示了兼容各浏覽器設置DIV最小高度的方法。 兼容ie6/ie7/ie8/firefox/Chrome

查看效果:
http:///keleyi/phtml/divcss/index.htm

以下是完整源代碼:

<!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">
<head>
<title>兼容各浏覽器設置DIV最小高度--</title>
<style type="text/css">
.keleyi_mindiv{ min-height:500px; /*IE7以上/Firefox */_height:500px; /*__IE6 */
height:100%; /*__IE6以上/Firefox 這個很重要,IE6定死高度後,需要再加上這條,才能自動拉伸高度。 */
border:1px solid #000;width:350px;float:left;margin:2px;}
</style>
</head>
<body>

<div class="keleyi_mindiv">當內容比較少時,div高度為所設置的最小值。<br /><br />
我們在用DIV+CSS布局文章內容頁面的時候,往往會讓DIV或其他元素自適應高度,可是當發布者發布的內容比較少的時候,比如只有一行字,那內容部分就變的很小,不美觀,可是我們直接設置一個高度的話,當內容很多時又會溢出,在這裡展示了兼容各浏覽器設置DIV最小高度的方法。
</div>
<div class="keleyi_mindiv">當內容過多時,div高度自動增加以適應。<br />
<ul><li><a href="http:///a/bjac/532bedbffca1affa.htm" title="單行文字間歇向上滾動,放上光標就停,移開繼續滾動" target="_blank">單行文字間歇向上滾動,放上光標就...</a></li><li><a href="http:///a/bjac/13639353acde40c.htm" title="" target="_blank">左側可彈出隱藏div</a></li><li><a href="http:///a/bjac/d863921ed93d03ff.htm" title="" target="_blank">jquery修改a標簽的href鏈接和文字</a></li><li><a href="http:///a/bjac/6f008786225269ac.htm" title="" target="_blank">jquery純文本返回頂部</a></li><li><a href="http:///a/bjac/ac398357acb82782.htm" title="" target="_blank">jquery倒計時</a></li><li><a href="http:///a/bjac/88af29335890a287.htm" title="" target="_blank">div(tab)切換</a></li><li><a href="http:///a/bjac/2041333085cb032d.htm" title="" target="_blank">Jquery選項卡切換效果</a></li><li><a href="http:///a/bjac/768f469b95b61487.htm" title="" target="_blank">單行文字間歇向上滾動</a></li><li><a href="http:///a/bjac/ed5eb8c2959c619e.htm" title="滾動頁面時DIV到達頂部時固定在頂部" target="_blank">滾動頁面時DIV到達頂部時固定在頂...</a></li><li><a href="http:///a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修飾title屬性的氣泡懸浮框" target="_blank">使用jQuery UI修飾title屬性的氣泡...</a></li><li><a href="http:///a/bjac/bf0eb8c02085b10d.htm" title="" target="_blank">jquery清空textarea等輸入框</a></li><li><a href="http:///a/bjac/939631bb07adb4dc.htm" title="" target="_blank">jquery關燈特效</a></li><li><a href="http:///a/bjac/f4a6f78d74a251c5.htm" title="jquery根據滾動像素顯示隱藏頂部導航條" target="_blank">jquery根據滾動像素顯示隱藏頂部導...</a></li><li><a href="http:///a/bjac/7e8897e5ec0849e9.htm" title="" target="_blank">可改變大小DIV層</a></li><li><a href="http:///a/bjac/e9e40a974de5a902.htm" title="" target="_blank">jquery添加移除類的兩個方法</a></li><li><a href="http:///a/bjac/cdbc89174171ebb8.htm" title="jquery實現的可隱藏重現的靠邊懸浮層" target="_blank">jquery實現的可隱藏重現的靠邊懸浮...</a></li><li><a href="http:///a/bjac/141932b419e08101.htm" title="jquery使用ColorBox彈出圖片組浏覽層" target="_blank">jquery使用ColorBox彈出圖片組浏覽...</a></li><li><a href="http:///a/bjac/1329fae4a4a54bdd.htm" title="高級彈出菜單(可以有三級菜單)" target="_blank">高級彈出菜單(可以有三級菜...</a></li><li><a href="http:///a/bjac/25827da945e6ce25.htm" title="" target="_blank">Jquery DIV切換(版本2)</a></li><li><a href="http:///a/bjac/b093dbeea725c30c.htm" title="" target="_blank">jquery彈出層菜單</a></li><li><a href="http:///a/bjac/e753bc9c582e4fb0.htm" title="" target="_blank">jquery 獲取 DIV的width</a></li><li><a href="http:///a/bjac/e328a48f82dbed8c.htm" title="" target="_blank">jquery 類選擇器</a></li><li><a href="http:///dev/433ee98f4133d7b5.htm" title="" target="_blank">jQuery實現可拖動的浮動層(版本2)</a></li><li><a href="http:///dev/e6c7bcc5afe86862.htm" title="" target="_blank">jQuery實現可拖動的浮動層</a></li><li><a href="http:///dev/94fb5964c80ee829.htm" title="" target="_blank">jQuery返回頂部</a></li><li><a href="http:///dev/a5545f666101ff05.htm" title="jQuery自動完成插件Autocomplete實例" target="_blank">jQuery自動完成插件Autocomplete實...</a></li><li><a href="http:///dev/4d233db8987beb38.htm" title="" target="_blank">jquery四種選擇器</a></li><li><a href="http:///dev/8014053f0ecd5d62.htm" title="" target="_blank">jQuery 語法</a></li><li><a href="http:///dev/7fd16e1b9849dba4.htm" title="" target="_blank">jquery“收藏本頁”代碼</a></li><li><a href="http:///dev/18e7e492c0777df0.htm" title="" target="_blank">jquery組合輸入框</a></li><li><a href="http:///dev/da9ad054d87d5178.htm" title="" target="_blank">jQuery向上彈出導航菜單</a></li><li><a href="http:///dev/2aeed9993bc80868.htm" title="" target="_blank">jQuery基礎知識</a></li><li><a href="http:///dev/9a7dba7dce4c155.htm" title="jquery的ajax()函數傳值中文亂碼的解決方案" target="_blank">jquery的ajax()函數傳值中文亂碼的...</a></li><li><a href="http:///dev/a6f55b6e358d0668.htm" title="JQuery設置onclick事件無效的處理方法" target="_blank">JQuery設置onclick事件無效的處理...</a></li><li><a href="http:///dev/3124805700c42847.htm" title="" target="_blank">jquery innerHTML</a></li><li><a href="http:///dev/9a11479052931934.htm" title="" target="_blank">jquery 獲取匹配的第一個元素</a></li><li><a href="http:///dev/453467666cab56d0.htm" title="" target="_blank">jquery圖片輪播切換</a></li><li><a href="http:///dev/d2ec4294512a439f.htm" title="" target="_blank">jQuery 選擇器</a></li><li><a href="http:///dev/c975cedd1ce1bd37.htm" title="" target="_blank">Jquery DIV切換</a></li><li><a href="http:///dev/3068696139522ae4.htm" title="" target="_blank">jquery樹形菜單</a></li><li><a href="http:///dev/c9b33bc5a199b2b2.htm" title="" target="_blank">Jquery XYTipsWindow 彈出層</a></li><li><a href="http:///dev/fd9291320daf9360.htm" title="" target="_blank">jquery右下角滑動彈出可關閉重現層</a></li><li><a href="http:///dev/87a60c4c3cab05ac.htm" title="" target="_blank">jquery.cookie.js</a></li><li><a href="http:///dev/b4fad48dd179a49e.htm" title="" target="_blank">Jquery下拉菜單實例代碼</a></li></ul>
</div>

</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved