CSS等高布局

2022-03-08 15:04:32 字數 474 閱讀 6772

做一些後台專案,和一下帶側邊欄專案的時候登高布局很常用,總結了下有幾種

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 發...