整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
是在寫樣式的時(shí)候，會(huì)碰到給div無(wú)論怎么加樣式 overflow-y: auto 的時(shí)候，都不會(huì)出現(xiàn)垂直的滾動(dòng)條，經(jīng)過(guò)不斷折騰終于知道是啥原因?qū)е铝恕?/span>
<style>
body{
height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出現(xiàn)滾動(dòng)條
}
.parent{
//你自己樣式
height: 100%; //父元素的高度也需要是100%才可以出現(xiàn)滾動(dòng)條
}
.children{
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
</style>
<div class="parent">
<div class="children">
xx-blog主題
xxzhuti主題網(wǎng)
</div>
、DIV高度自適應(yīng)（父div高度隨子div的高度改變而改變）
1、如果父div不定義height、子div均為標(biāo)準(zhǔn)流的時(shí)候，父div的height隨內(nèi)容的變化而變化,實(shí)現(xiàn)父div高度隨子div的高度改變而改變。
代碼：
<styletypestyletype="text/css">
#aa{border:#000000solid5px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
</< span>style>
<dividdivid="aa">父div
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
</< span>div>
效果：IE、FF下一致
2、如果父div定義height,子div均為標(biāo)準(zhǔn)流的時(shí)候，在IE下父div的height隨內(nèi)容變化而變化，ff中則固定大小，如父div設(shè)置height:50px
代碼：
<styletypestyletype="text/css">
#aa{border:#000000solid5px;height:50px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
</< span>style>
<dividdivid="aa">父div
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
</< span>div>
IE效果
FF下效果
3、如果子div使用了float屬性，此時(shí)已經(jīng)脫離標(biāo)準(zhǔn)流，父div不會(huì)隨內(nèi)容的高度變化而變化，解決的辦法是在浮動(dòng)的div下面，加一個(gè)空div，設(shè)置clear屬性both
未加空div代碼：
<styletypestyletype="text/css">
#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid="aa">父div
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
</< span>div>
IE效果：
FF效果：
修改后代碼：
<styletypestyletype="text/css">
#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid="aa">父div
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
<divstyledivstyle="clear:both"></< span>div>
</< span>div>
修改后效果：IEFF一致
4.另類的DIV高度自適應(yīng)
原理:
padding-bottom將列拉長(zhǎng)變的一樣高，而負(fù)的margin-bottom又使其回到底部開(kāi)始的位置，同時(shí)，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼：
"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}
</< span>style>
<dividdivid="aa">
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
<dividdivid="dd">子div<br/><br/><br/><br/><br/></< span>div>
</< span>div>
效果：
二、DIV高度自適應(yīng)（子div高度隨父親div高度改變而改變）
在有邊框的情況下，你會(huì)發(fā)現(xiàn)同一個(gè)div,在IE下的高度和在FF下的高度是不一樣的，比如你設(shè)置了高度為100px的div，邊框是border:5px;IE的高度是5+5+空白區(qū)域=100px，而FF下高度是100px的div是不包括高度的，只是空白區(qū)域的高度，如下圖黑框的部分:
黑框的上方是對(duì)齊的，但是設(shè)置了同樣的高度，效果卻不一樣，代碼如下：
<styletypestyletype="text/css">
#aa{border:#000000solid5px;height:100px;}
#bb{border:#00ffffsolid5px;float:left;height:100%}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid="aa">
<dividdivid="bb">子div</< span>div>
<dividdivid="cc">子div</< span>div>
</< span>div>
如果沒(méi)有設(shè)置邊框，完全沒(méi)有高度不一致的情況，子div適應(yīng)父div很簡(jiǎn)單，如上面代碼，只是在子div加了height:100%屬性即可。如果設(shè)置了邊框，可以把子div的高度設(shè)置為比父div小上下邊框高度的值，比如在此例中，可把#bb中height改為100-5-5＝90px，結(jié)果在IE和Mozilla中顯示一致。
有一點(diǎn)要注意，如果父div是body的話，也就是說(shuō)一個(gè)body套了一個(gè)div，讓div適合body的大小的，必須設(shè)置body的高度才能實(shí)現(xiàn)子div隨body改變而改變，body{height:100%}
文/丁向明
做一個(gè)有博客的web前端自媒體人，專注web前端開(kāi)發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833
http://dingxiangming.com
近有客戶在linux系統(tǒng)部署皕杰報(bào)表后發(fā)現(xiàn)總有高度拉伸不到位的情況發(fā)生，可是我們自己卻無(wú)論怎么測(cè)試都不能重現(xiàn)問(wèn)題。不能重現(xiàn)問(wèn)題，就不好找出解決問(wèn)題的方法。
于是要來(lái)了這張問(wèn)題表的html源代碼，在瀏覽器中打開(kāi)后用F12檢查，發(fā)現(xiàn)這個(gè)單元格的拉伸高度計(jì)算不正確。見(jiàn)下圖：
是什么原因?qū)е碌挠?jì)算錯(cuò)誤呢？我們分析有兩種可能，一是所用的皕杰報(bào)表版本太老，二是計(jì)算高度的依據(jù)缺失，而計(jì)算拉伸高度的依據(jù)是字體和字號(hào)。
檢查了客戶使用的版本號(hào)沒(méi)有問(wèn)題，但在linux系統(tǒng)里卻只安裝了宋體，其它中文字體都沒(méi)有，而在報(bào)表里選擇的字體卻是微軟雅黑，計(jì)算的依據(jù)沒(méi)了，系統(tǒng)所以計(jì)算出的拉伸高度就是錯(cuò)的了。讓用戶把報(bào)表里的字體改成宋體，再測(cè)試?yán)旄叨茸兇罅艘稽c(diǎn)，但是還是沒(méi)有完全拉開(kāi)，我們判斷是jre里也沒(méi)有宋體，理論上在jre里安裝宋體后拉伸問(wèn)題就會(huì)得到解決。
因而我們給了兩個(gè)解決方案：一是在linux系統(tǒng)中和jre中安裝所用的中文字體，方法按linux系統(tǒng)及安裝jdk的基本要求，這里不做說(shuō)明。二是改這個(gè)單元格的css，讓單元格廢棄計(jì)算的拉伸高度，改為自動(dòng)拉伸。
在皕杰報(bào)表設(shè)計(jì)器全局屬性web資源引用中添加：
<style type="text/css">
.expand div{
height: auto !important;
}
</style>在設(shè)計(jì)器這個(gè)單元格的屬性css樣式里添加expand。
用戶覺(jué)得jre中安裝中文字體比較麻煩，決定采用方法二測(cè)試。部署后我們看到單元格已經(jīng)正常拉伸了，用F12檢查一下運(yùn)行的css，果然是廢棄了計(jì)算的高度，而采用了我們新增的css格式。見(jiàn)圖：
至此高度拉伸不到位問(wèn)題得以解決。但我們認(rèn)為最好的解決方案還是方法一，把要用的中文字體安裝上，避免產(chǎn)生錯(cuò)誤的計(jì)算結(jié)果。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
