推薦:網頁中三列自適應高度布局的實現

來源:互聯網
上載者:User
網頁|自適應

  三列的布局,一個固定寬度的左列是導航列,右列可以放Google Ads 或者 Flickr的像冊,自適應寬度的中間列是主要內容。

  特點:

  • 有一個自適應寬度的中間列與固定的寬度左右列。
  • 中間列的主要內容首先出現在網頁中。
  • 可以允許任一個列的內容為最高。
  • 非常簡單的CSS和最少的Hacks。

  Step 1: 搭建結構

  先從header, footer, and container開始.

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

  給Container 一個左右方向的內補丁,其寬度相當於左右列的寬度.

#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}

  現在的布局如下圖:

  Step 2: 增加列

  在已有布局基礎上加再左、中、右列

<div id="header"></div>
  <div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  </div>
<div id="footer"></div>

  然後加寬度和浮動,底部的Footer須清除浮動,使其保持在最下面。.

  #container .column {
  float: left;
  }
  #center {
  width: 100%;
  }
  #left {
  width: 200px; /* LC width */
  }
  #right {
  width: 150px; /* RC width */
  }
  #footer {
  clear: both;
  }

  現在的代碼啟動並執行結果如下圖,由於#container的左右填充和#center100%的緣故,左列和右列被擠到#center的下面,這不是我們想要的結果。

  Step 3: 給左欄定位

  採取二步給這個左欄定位,首先給左欄一個-100%的左邊界,相當於中間欄的寬度,此時,左欄和中間欄重合,共用它的左邊緣,如下圖。

  #left {
  width: 200px; /* LC width */
  margin-left: -100%;
  }

  然後採用相對定位的辦法將左欄定位到距右邊200PX的地方(也就是左欄的寬度)。

  #container .columns {
  float: left;
  position: relative;
  }
  #left {
  width: 200px; /* LC width */
  margin-left: -100%;
  right: 200px; /* LC width */
  }

  現在左欄的位置正好是#container的左內補丁。

  Step 4: 給右欄定位

  將右欄定位於#container的右內補丁位置,只要設定右欄的負右邊界就可。

  #right {
  width: 150px; /* RC width */
  margin-right: -150px; /* RC width */
  }

  現在布局中的空白地區已消失。

  Step 5:最後的完善

  至此,布局已基本完成,但如果瀏覽器的最小尺寸比中心寬度小,那麼左列將變的很小,所以要設定個最小寬度,可惜IE現在還不支援。800x600沒問題

  body {
  min-width: 550px; /* 2x LC width + RC width */
  }

  第四步完成的代碼在IE裡左欄會消失,現在要做的是把左欄定到它正確的位置上去。

  * html #left {
  left: 150px; /* RC width */
  }

  內容的邊距

  我們需要給內容一個內補丁(10PX),否則的話,文本都頂著邊。

  列的總寬度等於(padding+width)。

  #left {
  width: 180px; /* LC fullwidth - padding */
  padding: 0 10px;
  right: 200px; /* LC fullwidth */
  margin-left: -100%;
  }

  對IE5.x,應該用個hacks

  body {
  min-width: 630px; /* 2x (LC fullwidth +
  CC padding) + RC fullwidth */
  }
  #container {
  padding-left: 200px; /* LC fullwidth */
  padding-right: 190px; /* RC fullwidth + CC padding */
  }
  #container .column {
  position: relative;
  float: left;
  }
  #center {
  padding: 10px 20px; /* CC padding */
  width: 100%;
  }
  #left {
  width: 180px; /* LC width */
  padding: 0 10px; /* LC padding */
  right: 240px; /* LC fullwidth + CC padding */
  margin-left: -100%;
  }
  #right {
  width: 130px; /* RC width */
  padding: 0 10px; /* RC padding */
  margin-right: -190px; /* RC fullwidth + CC padding */
  }
  #footer {
  clear: both;
  }
  /*** IE Fix ***/
  * html #left {
  left: 150px; /* RC fullwidth */
  }

  高度自適應

  #container {
  overflow: hidden;
  }
  #container .column {
  padding-bottom: 20010px; /* X + padding-bottom */
  margin-bottom: -20000px; /* X */
  }
  #footer {
  position: relative;
  }

  這個代碼起源於adapted wholesale。

  遺憾的是現在Opera還不支援#container的overflow,期待版本9。

  現在IE還不能真正的自適應高度,還要加下面的代碼,如果你需要#footer,可再加個DIV(#footer外面)。
<div id="footer-wrapper">
  <div id="footer"></div>
</div>

  * html body {
  overflow: hidden;
  }
  * html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff; /* Same as body
  background */
  }



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。