首页 > css+html:一个竖二栏结构,如何做到上栏不固定高度并且固定在上,下栏自动填充其余高度?

css+html:一个竖二栏结构,如何做到上栏不固定高度并且固定在上,下栏自动填充其余高度?

上栏会根据内容增加高度,并且固定在上方,不论怎么滚动都能看见,下栏是内容区,可滚动,如图

如果上栏使用position:fixed固定在上,那中间的设置为height:100%就行了,但是这样做会和图中那样,右侧的滚动条跨过了上栏。(实际情况中这个滚动条会被上遮住住,看不到滚动条上去了,但是它的确是上去了)并且因为上栏不固定高度,下栏的内容不知道该在上方填充一个多高的div

如果上栏不做调整,滚动条则不会跨过上栏,但是下栏就不能使用height:100%了,如果使用100%,下栏就会向下突出,并且最下面的内容会永远看不见(同样也因为不知道上栏高度,下栏的最后不知道该填充一个多高的div)


display:flex
用流式布局
下面的容器设置flex: 1 1 auto
上面的自然即可。

【热门文章】
【热门文章】