css - 多列 CSS 最小高度 100%

Question

我关注了这个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 

Answer 1

只需删除 height: 100%;来自你的 CSS。

http://jsfiddle.net/8DNmh/2/