多列CSS最小高度100％

Question

我跟着这个guide来帮助设置我的页面的列。

我想要做的是让我的列填充屏幕，如果屏幕大于内容，但是当内容长于浏览器屏幕可以立即显示时，使用默认溢出滚动或汽车。

目前，我有身体，我的容器（文章中描述的容器周围的div）以及文章中描述的容器设置为高度：100％。当页面适合所有的内容时这很好，但是当屏幕太小时，内容就会被切断。

我试图通过将主体或我的容器更改为最小高度到100％来解决此问题，尽管这会使较小的屏幕再次显示一切，但在较大的屏幕中，2列“背景”不会延伸到底部的页面，但我的容器呢。

编辑：我的HTML和body也设置为当前高度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

只是删除身高：100％;从你的CSS。

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