开发者社区> 问答> 正文

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

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

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

展开
收起
a123456678 2016-05-26 17:08:24 2507 0
1 条回答
写回答
取消 提交回答
  • display:flex
    用流式布局
    下面的容器设置flex: 1 1 auto
    上面的自然即可。

    2019-07-17 19:16:35
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载