css 左側跟隨右側高度自適應

2022-07-21 11:42:21 字數 468 閱讀 7021

給父元素設定position:relative,左邊的子元素設定position:absulote,且左邊元素的高度為100%。css**如下:

/*position*/

.left

.right

.parent

這種方法的原理其實是把子元素的實際高度撐開的很多,父元素overflow:hidden起到乙個遮罩作用,來保持左右兩側元素高度相等的。css**如下

/*margin負值*/

.parent

.left,.right

.left

.right

flex布局的中align-items的stretch屬性可以讓內部元素高度鋪滿。css**如下:

/*flex布局*/

.parent

.left

.right

本文摘自:

左側導航高度,自適應右側內容高度

1 div id left style background 263238 width 200px float left 2 p 我是左側選單,我的高度自適應右側內容高度 p 3div 4 div id right style border 1px solid 263238 width 500px ...

左側內容隨右側內容高度自適應高度

html,body container left,right left right style head class container class left div class right div div body 這樣右側內容不管有多少,左側高度會自適應和右側內容高度一致 不過這個有點顧頭不顧腦...

左側固定 右側自適應

左側浮動,右側margin left值為左側寬即可。由於左側浮動,左側盒子脫標,右側仍在標準文件流,右側盒子寬度是剩下的寬度,效果為右側自適應。右側內容可居中,常規用法即可。需注意的是左側浮動,右側不能繼續浮動。如果兩邊盒子都浮動,由於右側盒子寬度不固定,預設為內容撐開寬度。若浮動,極有可能在第二排...