CSS 左右兩列自適應等高
某些情況下,網頁左右兩欄等高效果更為相對美觀。
又由於兩欄中的資料可能是動態讀出的,也就是高度不固定。
所以要根據較高的那一欄實現兩欄高度自適應相等效果。
通過就JavaScript可以比較輕鬆的實現此效果,當然使用css也是可以實現。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #main{ overflow:hidden; width:500px; margin:0 auto; border:1px solid red; } #left{ float:left; width:390px; background:#eee; } #right{ float:right; width:100px; background:#ccc; } #left,#right{ margin-bottom:-1000px; padding-bottom:1000px; } </style> </span> </head> <body> <div id="main"> <div id="left">螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來,沒有人一開始就是高手</div> <div id="right">div css教程</div> </div> </body> </html>
上面的程式碼實現了左右兩欄高度自適應效果,下面介紹一下此效果的實現原理。
實現原理:
上面的效果的關鍵程式碼如下:
[CSS] 純文字檢視 複製程式碼#left,#right{ margin-bottom:-1000px; padding-bottom:1000px; }
預設狀態下,也就是沒有上面的程式碼,左右兩欄的高度就是內容的高度,不會是等高的。
設定margin-bottom:-1000px之後,兩個div會被偏移到下面,這個時候父div的高度就是0,然後再設定元素的padding-bottom:1000px,由於外邊距和內邊距數值的絕對值相同,也就恰好,將子元素的文字推送到父元素中,元素下面的部分則被擷取,於是實現的高度自適應且兩側高度相等的效果,其實並非真正的相等,只是顯示的部分相等而已。
相關文章
- css實現的左右兩列自適應等高效果程式碼例項CSS
- css實現的左右兩列寬度固定中間寬度自適應CSS
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應)CSS
- css兩列等高程式碼例項CSS
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- css佈局,左右固定中間自適應實現CSS
- css實現的左右兩側寬度固定中間自適應可變程式碼CSS
- 兩列自適應佈局方案整理
- css三列自適應佈局效果CSS
- css--常見左右盒子寬度高度自適應佈局CSS
- 兩列居中寬度自適應佈局
- css三列一列寬度自適應效果CSS
- css實現兩欄固定中間自適應CSS
- 用margin實現兩列布局中的自適應列
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- css自適應佈局CSS
- js兩列等高程式碼例項JS
- CSS-佈局2-中間固定兩邊自適應CSS
- CSS實現三列DIV等高佈局CSS
- CSS佈局 --- 自適應佈局CSS
- padding補償法實現兩列等高padding
- gridview自動適應列寬View
- 【HTML / CSS】使用position自適應佈局HTMLCSS
- css實現左欄固定右欄自適應,高度自適應的佈局CSS
- 三列寬度自適應佈局
- QTableWidget行高列寬自適應QT
- Html佈局左右寬度固定中間自適應解決方案HTML
- css之左邊定寬右邊自適應CSS
- CSS實現圖片寬度自適應CSS
- 純 CSS 實現自適應正方形CSS
- jQuery拖動調整左右兩列寬度jQuery
- css實現的三列等高效果程式碼例項CSS
- 固定寬度下,CSS 實現自適應文字CSS
- css左欄固定右欄寬度自適應CSS
- 如何實現兩欄佈局,右側自適應?三欄佈局中間自適應呢?
- flex佈局兩邊固定寬 中間自適應Flex
- 三列自適應佈局(聖盃佈局)