css設置高度height: 100%滾動條無法顯示的解決辦法

是在寫樣式的時候，會碰到給div無論怎么加樣式 overflow-y: auto 的時候，都不會出現垂直的滾動條，經過不斷折騰終于知道是啥原因導致了。

<style>
body{
height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出現滾動條
}
.parent{
//你自己樣式
height: 100%; //父元素的高度也需要是100%才可以出現滾動條
}
.children{
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
</style>

<div class="parent">
<div class="children">
xx-blog主題
xxzhuti主題網
</div>

、DIV高度自適應（父div高度隨子div的高度改變而改變）

1、如果父div不定義height、子div均為標準流的時候，父div的height隨內容的變化而變化,實現父div高度隨子div的高度改變而改變。

代碼：

<styletypestyletype="text/css">

#aa{border:#000000solid5px}

#bb{border:#00ffffsolid5px;}

#cc{border:#0033CCsolid5px}

</style>

<dividdivid="aa">父div

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

</div>

效果：IE、FF下一致

2、如果父div定義height,子div均為標準流的時候，在IE下父div的height隨內容變化而變化，ff中則固定大小，如父div設置height:50px

代碼：

<styletypestyletype="text/css">

#aa{border:#000000solid5px;height:50px}

#bb{border:#00ffffsolid5px;}

#cc{border:#0033CCsolid5px}

</style>

<dividdivid="aa">父div

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

</div>

IE效果

FF下效果

3、如果子div使用了float屬性，此時已經脫離標準流，父div不會隨內容的高度變化而變化，解決的辦法是在浮動的div下面，加一個空div，設置clear屬性both

未加空div代碼：

<styletypestyletype="text/css">

#aa{border:#000000solid5px;}

#bb{border:#00ffffsolid5px;float:left}

#cc{border:#0033CCsolid5px;float:left}

</style>

<dividdivid="aa">父div

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

</div>

IE效果：

FF效果：

修改后代碼：

<styletypestyletype="text/css">

#aa{border:#000000solid5px;}

#bb{border:#00ffffsolid5px;float:left}

#cc{border:#0033CCsolid5px;float:left}

</style>

<dividdivid="aa">父div

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

<divstyledivstyle="clear:both"></div>

</div>

修改后效果：IEFF一致

4.另類的DIV高度自適應

原理:

padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，同時，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示

代碼：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">

<styletypestyletype="text/css">

#aa{border:#000000solid5px;overflow:hidden;}

#bb{border:#00ffffsolid5px;float:left;

padding-bottom:100000px;margin-bottom:-100000px;}

#cc{border:#0033CCsolid5px;float:left;

padding-bottom:100000px;margin-bottom:-100000px;}

#dd{float:left}

</style>

<dividdivid="aa">

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

<dividdivid="dd">子div </div>

</div>

效果：

二、DIV高度自適應（子div高度隨父親div高度改變而改變）

在有邊框的情況下，你會發現同一個div,在IE下的高度和在FF下的高度是不一樣的，比如你設置了高度為100px的div，邊框是border:5px;IE的高度是5+5+空白區域=100px，而FF下高度是100px的div是不包括高度的，只是空白區域的高度，如下圖黑框的部分:

黑框的上方是對齊的，但是設置了同樣的高度，效果卻不一樣，代碼如下：

<styletypestyletype="text/css">

#aa{border:#000000solid5px;height:100px;}

#bb{border:#00ffffsolid5px;float:left;height:100%}

#cc{border:#0033CCsolid5px;float:left}

</style>

<dividdivid="aa">

<dividdivid="bb">子div</div>

<dividdivid="cc">子div</div>

</div>

如果沒有設置邊框，完全沒有高度不一致的情況，子div適應父div很簡單，如上面代碼，只是在子div加了height:100%屬性即可。如果設置了邊框，可以把子div的高度設置為比父div小上下邊框高度的值，比如在此例中，可把#bb中height改為100-5-5＝90px，結果在IE和Mozilla中顯示一致。

有一點要注意，如果父div是body的話，也就是說一個body套了一個div，讓div適合body的大小的，必須設置body的高度才能實現子div隨body改變而改變，body{height:100%}

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com

近有客戶在linux系統部署皕杰報表后發現總有高度拉伸不到位的情況發生，可是我們自己卻無論怎么測試都不能重現問題。不能重現問題，就不好找出解決問題的方法。

于是要來了這張問題表的html源代碼，在瀏覽器中打開后用F12檢查，發現這個單元格的拉伸高度計算不正確。見下圖：

是什么原因導致的計算錯誤呢？我們分析有兩種可能，一是所用的皕杰報表版本太老，二是計算高度的依據缺失，而計算拉伸高度的依據是字體和字號。

檢查了客戶使用的版本號沒有問題，但在linux系統里卻只安裝了宋體，其它中文字體都沒有，而在報表里選擇的字體卻是微軟雅黑，計算的依據沒了，系統所以計算出的拉伸高度就是錯的了。讓用戶把報表里的字體改成宋體，再測試拉伸高度變大了一點，但是還是沒有完全拉開，我們判斷是jre里也沒有宋體，理論上在jre里安裝宋體后拉伸問題就會得到解決。

因而我們給了兩個解決方案：一是在linux系統中和jre中安裝所用的中文字體，方法按linux系統及安裝jdk的基本要求，這里不做說明。二是改這個單元格的css，讓單元格廢棄計算的拉伸高度，改為自動拉伸。

在皕杰報表設計器全局屬性web資源引用中添加：

<style type="text/css">
.expand div{
 height: auto !important;
 }
</style>

在設計器這個單元格的屬性css樣式里添加expand。

用戶覺得jre中安裝中文字體比較麻煩，決定采用方法二測試。部署后我們看到單元格已經正常拉伸了，用F12檢查一下運行的css，果然是廢棄了計算的高度，而采用了我們新增的css格式。見圖：

至此高度拉伸不到位問題得以解決。但我們認為最好的解決方案還是方法一，把要用的中文字體安裝上，避免產生錯誤的計算結果。

在線咨詢

上一篇：C# 正則獲取網頁內容, 抓取html源代碼里的 title
下一篇：HTML怎么防止用戶復制？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css設置高度height: 100%滾動條無法顯示的解決辦法

您的項目需求