做一些後台專案,和一下帶側邊欄專案的時候登高布局很常用,總結了下有幾種
1.margin-bottom方法
這裡直接介紹我認為的最佳的側邊欄/分欄高度自動相等方法。核心的css**如下(數值不固定):
margin-bottom:-3000px; padding-bottom:3000px;
再配合父標籤的overflow:hidden
屬性即可實現高度自動相等的效果。
舉個簡單的例項吧,如下css及html**:
#content.left
.right
.center
左邊,無高度屬性,自適應於最高一欄的高度右邊,無高度屬性,自適應於最高一欄的高度
中間,高度600畫素,左右兩欄的高度與之自適應
後續再慢慢總結比較實用的幾種
參考:
css聖杯布局 等高布局
所謂聖杯布局,就是自適應瀏覽器的解析度,也稱雙飛翼布局。例子 1 style 2body 3.center 4.left 5.right 6style 7head 8 body 9 div class center 2 div 10 div class left 1 div 11 div class...
css之等高布局
等高布局 等高布局 dskdksnvssn dskdksnvssn dskdksnvssn dskdksnvssn dskdksnvssn padding bottom 使得float元素內部被撐開 margin bottom 使得外層div與內層div的bottom產生距離,使外層divbotto...
CSS例項 CSS實現的等高網頁布局
為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發...