純CSS實現側邊欄 分欄高度自動相等

2021-08-25 03:06:16 字數 604 閱讀 7128

本文摘自:

這裡直接介紹我認為的最佳的側邊欄/分欄高度自動相等方法。核心的css**如下(數值不固定):

margin-bottom:-3000px; padding-bottom:3000px;
再配合父標籤的overflow:hidden屬性即可實現高度自動相等的效果。

舉個簡單的例項吧,如下css及html**:

#content

.left

.right

.center

左邊,無高度屬性,自適應於最高一欄的高度

右邊,無高度屬性,自適應於最高一欄的高度

中間,高度600畫素,左右兩欄的高度與之自適應

結果如下圖:

說明:核心css**部分的3000畫素是個可變值,如果您的分欄高度不可能高度超過2000畫素,您就可以設為 2000畫素,如果會超過3000畫素,那麼您要修改值為4000畫素或是更高。

父標籤的overflow:hidden 屬性是必須的,否則會顯示溢位的內容。

純css實現炫酷側邊欄

有疑問的小夥伴可以深入 學習?網頁展示 pc端更佳 html結構 lang en dir ltr charset utf 8 側邊欄title rel stylesheet type text css href css siderbar.css href css font awesome.min.c...

CSS實現側邊欄導航

charset utf 8 title type text css 隱藏checked核取方塊 sidemenu sidemenu checked aside sidemenu checked wrap aside h2 控制側邊欄進出的按鈕 外部包裹 wrap 控制側邊欄進出的按鈕 內部文字樣式 ...

CSS3 實現側邊欄展開收起動畫

keyframes 規則用於建立動畫。keyframes 中規定某項 css 樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果 keyframes 中建立動畫時,請把它 到某個選擇器,否則不會產生動畫效果。通過規定至少以下兩項 css3 動畫屬性,即可將動畫繫結到選擇器 規定動畫的名稱 規定動畫的時...