css+html:一个竖二栏结构,如何做到上栏不固定高度并且固定在上,下栏自动填充其余高度?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-05-26 17:08:24 1974 1

上栏会根据内容增加高度,并且固定在上方,不论怎么滚动都能看见,下栏是内容区,可滚动,如图
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
相关问答

1

回答

html怎么引入css

2018-05-10 20:05:55 1182浏览量 回答数 1

1

回答

怎么在html中引入css

2018-05-10 20:06:48 1251浏览量 回答数 1

2

回答

html中怎么引入css

2018-05-10 20:06:04 1349浏览量 回答数 2

1

回答

在HTML页面中,<hr>为双标记,用于定义一条水平线是吗?

2021-11-23 06:50:20 297浏览量 回答数 1

1

回答

在HTML页面中,<hr>为双标记,用于定义一条水平线,这句话正确吗?

2021-10-29 19:32:07 484浏览量 回答数 1

1

回答

一个有5个框架的web页面它实际上是有多少个独立的HTML文件?

2021-10-29 19:11:57 331浏览量 回答数 1

1

回答

怎么把SpringBoot+Thymeleaf+MySQL的增删改查用HTML页面展示出来

2021-10-26 18:39:15 281浏览量 回答数 1

1

回答

网站上传到云服务器后,html页面全部能正常访问,但文件后缀名为.php的页面都无法访问

2020-03-02 11:30:24 1172浏览量 回答数 1

1

回答

在HTML页面上编译python程序

2020-02-22 15:30:35 393浏览量 回答数 1

1

回答

请问html页面如何和JavaScript共用一个变量

2016-03-12 16:13:56 2740浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
利用 Poplayer 在手淘中实现稳定业务和临时业务分离
立即下载
零基础CSS入门教程
立即下载
《零基础HTML入门教程》
立即下载