建站
咨詢
售后
建站咨詢
新聞中心
你對(duì)CSS布局自適應(yīng)高度解決方法是否了解，這里和大家分享一下，本文要介紹的方法是采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來(lái)解決列高度相同的問(wèn)題。
在衡山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需求定制開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都全網(wǎng)營(yíng)銷,成都外貿(mào)網(wǎng)站建設(shè)公司,衡山網(wǎng)站建設(shè)費(fèi)用合理。
CSS布局自適應(yīng)高度解決方法
這是一個(gè)比較典型的三行二列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個(gè)設(shè)計(jì)師追求的目標(biāo)，按一般的做法，大多采用背景圖填充、加JS腳本的方法使列的高度相同，本文要介紹的是采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來(lái)解決列高度相同的問(wèn)題。
先看代碼：
- #wrap{
- overflow:hidden;
- }
- #sideleft,#sideright{
- padding-bottom:32767px;
- margin-bottom:-32767px;
- }
實(shí)現(xiàn)原理：
塊元素必須包含在一個(gè)容器里。
應(yīng)用overflow:hidden到容器里的元素。
應(yīng)用padding-bottom（足夠大的值）到列的塊元素。
應(yīng)用margin-bottom（足夠大的值）到列的塊元素。
padding-bottom將列拉長(zhǎng)變的一樣高，而負(fù)的margin-bottom又使其回到底部開(kāi)始的位置，同時(shí)，溢出部分隱藏掉了。
兼容各瀏覽器
IEMac5
得到高度正確，所以要過(guò)濾掉上面的代碼。
- /*\*/
- #sideleft,#sideright{
- padding-bottom:32767px;
- margin-bottom:-32767px;
- }
- /**/
Opera
1.Opera7.0-7.2不能正確清除溢出部分，所以要加：
- /*easyclearing*/
- #wrap:after
- {
- content:'[DONOTLEAVEITISNOTREAL]';
- display:block;
- height:0;
- clear:both;
- visibility:hidden;
- }
- #wrap
- {
- display:inline-block;
- }
- /*\*/
- #wrap
- {
- display:block;
- }
- /*endeasyclearing*/
- /*\*/
2.Opera8處理overflow:hidden有個(gè)BUG,還得加上以下代碼：
- /*\*/
- #sideleft,#sideright
- {
- padding-bottom:32767px!important;
- margin-bottom:-32767px!important;
- }
- @mediaalland(min-width:0px){
- #sideleft,#sideright
- {
- padding-bottom:0!important;
- margin-bottom:0!important;
- }
- #sideleft:before,#sideright:before
- {
- content:'[DONOTLEAVEITISNOTREAL]';
- display:block;
- background:inherit;
- padding-top:32767px!important;
- margin-bottom:-32767px!important;
- height:0;
- }
- }
- /**/
3.Opera9的B2在修正8的bug.
測(cè)試環(huán)境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2通過(guò)。
【編輯推薦】
- CSS中margin常見(jiàn)問(wèn)題解決方案
- CSS中margin邊界疊加問(wèn)題及解決方案
- CSS樣式表高效使用八大秘訣
- 四種方法解決DIV高度自適應(yīng)問(wèn)題
- 實(shí)現(xiàn)CSS垂直居中的五大方法及優(yōu)缺點(diǎn)
網(wǎng)站題目：CSS布局自適應(yīng)高度解決方法
文章路徑：http://m.fisionsoft.com.cn/article/dpiojio.html
