开发者社区> 问答> 正文

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

a123456678 2016-05-26 17:08:24 883

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

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

分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:35

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

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章