css實現的左右兩列自適應等高效果程式碼例項

antzone發表於2017-03-10
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,由於外邊距和內邊距數值的絕對值相同，也就恰好，將子元素的文字推送到父元素中，元素下面的部分則被擷取，於是實現的高度自適應且兩側高度相等的效果，其實並非真正的相等，只是顯示的部分相等而已。

相關文章