我关注了这个guide帮助设置我的页面的列。
我想做的是,如果屏幕比内容大,我的列会填满屏幕,但是当内容比浏览器屏幕可以一次显示的长时,使用默认的溢出滚动或自动.
目前,我有正文、我的容器(文章中描述的容器周围的 div)以及文章中描述的容器设置为 height: 100%。当页面适合所有内容时这很好,但当屏幕太小时,内容就会被切断。
我尝试通过将 body 或我的容器的最小高度更改为 100% 来解决此问题,尽管这会使较小的屏幕再次显示所有内容,但在较大的屏幕中,2 列“背景”不会延伸到底部页面,但我的容器有。
编辑:我的 html 和正文目前也设置为 100% 高度。
Edit2:这是一个jsfiddle内容大于屏幕时的样子
现在的结构是这样的:
body (height: 100%)
my_container (height: 100%)
container2 (height: 100%)
container1 (height: 100%)
column1
column2
我希望它是这样的
body
my_container (min-height: 100%)
container2 (height: 100%)
container1 (height: 100%)
column1
column2
最佳答案
只需删除 height: 100%;来自你的 CSS。
关于css - 多列 CSS 最小高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12318885/