給div添加滾動條 高度設(shè)置百分比不生效的原因和無效的解決方法
div 添加滾動條只需要指定 overflow 屬性為 auto 即可，以下實(shí)例設(shè)置了 div 水平滾動條：
實(shí)例
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;"> 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想！！！ </div>
寬度(width)和高度(height)可以根據(jù)實(shí)際需要來設(shè)定。
以上實(shí)例表示如果 div 內(nèi)容的高度大于 300px 就會出現(xiàn)垂直滾動條，小于 300px 就沒有滾動條。如果寬度大于 70px 會出現(xiàn)水平滾動條，小于就沒有。
如果你想在 div 中滾動條是一直存在的則可以設(shè)置 overflow 屬性為 scroll：
你也可以將 overflow 設(shè)置為 scroll，即:
實(shí)例
<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。?！ 365建站 -- 學(xué)的不僅是技術(shù)，更是夢想?。。?lt;/div>
更多設(shè)置
只設(shè)置水平滾動條：
<div style="width:100px;overflow-x:auto"></div>
只設(shè)置垂直滾動條：
<div style="height:300px;overflow-y:auto"></div>
水平與垂直都設(shè)置：
<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>
overflow-y:scroll; 總是顯示縱向滾動條
overflow-y:visible : 不剪切內(nèi)容也不添加縱向滾動條
overflow-x:scroll; 總是顯示橫向滾動條
overflow-x:visible : 不剪切內(nèi)容也不添加橫向滾動條
給div高度設(shè)置百分比不生效的問題及解決方法
今天想做一個極為簡單的頁面，就是分為頭部，內(nèi)容和底部，本來用三個div即可，可是給div高度設(shè)置百分比時發(fā)現(xiàn)不生效，具體頁面如下，非常簡單。
下面是html部分：
<body> <div id="header"> aaaaa </div> <div id="content"> bbbbbb </div> <div id="footer"> cccccc </div> </body>
就三個div,div是塊級元素，寬度會默認(rèn)撐開，如果不設(shè)置高度時，默認(rèn)內(nèi)容會撐開高度
現(xiàn)在給div設(shè)置一下高度，如下
<style>
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 150px;
background-color: blue;
}
#footer{
width: 100%;
height: 100px;
background-color: purple;
}
</style>其中給div1和div3的高度設(shè)置了具體的值，這樣的話，高度會撐開，但是如果將高度值設(shè)置為百分比，情況就不一樣了，代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 15%;
background-color: blue;
}
#footer{
width: 100%;
height: 10%;
background-color: purple;
}
</style>將高度設(shè)置為百分比后，
高度撐不開了，只會隨著內(nèi)容的高度撐開，這是為什么呢？
HTML 中塊級元素設(shè)置 height:100% 的實(shí)現(xiàn)
當(dāng)你設(shè)置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數(shù)情況下，無效，這樣的做法沒有任何效果。
為什么height:100%不起作用無效呢？
按照常理，當(dāng)我們用CSS的height屬性定義一個元素的高度時，這個元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應(yīng)該在頁面的豎向空間里占滿100px的高度。
而跟W3C的規(guī)范，百分比的高度在設(shè)定時需要根據(jù)這個元素的父元素容器的高度。所以，如果你把一個div的高度設(shè)定為height: 50%;，而它的父元素的高度是100px，那么，這個div的高度應(yīng)該是50px。
當(dāng)設(shè)計(jì)一個頁面時，你在里面放置了一個div元素，你希望它占滿整個窗口高度，最自然的做法，你會給這個div添加height: 100%;的css屬性。然而，如果你要是設(shè)置寬度為width: 100%;，那這個元素的寬度會立刻擴(kuò)展到窗口的整個橫向?qū)挾取８叨纫矔@樣嗎？
錯
為了理解為什么不會，你要理解瀏覽器是如何計(jì)算高度和寬度的。Web瀏覽器在計(jì)算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設(shè)定任何缺省值，那瀏覽器會自動將頁面內(nèi)容平鋪填滿整個橫向?qū)挾取?/p>
但是高度的據(jù)計(jì)算方式完全不一樣。事實(shí)上瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍（導(dǎo)致滾動條出現(xiàn)）?；蛘吣憬o整個頁面設(shè)置一個絕對高度，否則，瀏覽器就會簡單的讓內(nèi)容往下堆砌，頁面的高度就無需考慮。因?yàn)轫撁娌]有缺省的高度值，所以當(dāng)你讓一個元素的高度設(shè)定為百分比，無法獲取到父級的高度，自然也無法計(jì)算自己的高度。換句話說父元素的高度只是一個缺省值：height:auto.當(dāng)你要求瀏覽器根據(jù)這樣一個缺省值來計(jì)算百分比高度時，只能得到undefined的結(jié)果。也就是一個null值，瀏覽器不會對這個值有任何的反應(yīng)。
父元素沒有設(shè)定固定高度，于是子元素的高度height: 100% 也不會起作用。
那么，如果想讓一個元素的百分比高度：height::100% 起作用，你需要給這個元素的所有父級元素的高度都設(shè)定一個值。
換句話說在剛剛的例子中，需要給body和html元素的高度都設(shè)置為height:100% 下面的div的高度的百分比才會生效
即：
<style>
*{
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
}
#header{
width: 100%;
height: 15%;
background-color: blue;
}
#footer{
width: 100%;
height: 10%;
background-color: purple;
}
</style>
這樣的話，div1和div3的百分比高度就會生效
另外的解決方法：用position:fixed
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>div高度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
position:fixed;
background-color:#c7c7c7;
}
</style>
</head>
<body>
<div class="nav">
divdivdiv
</div>
</body>
</html>如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點(diǎn)擊進(jìn)入論壇
