CSS 高度 :100% for childs made over flow abnormally

Question

你好，我想为左侧栏和侧边栏设置全高，我必须是 100% 高度，但它让我的 css 看起来有点问题

 html{
  height: 100%;
    min-height: 100%;
   }

body{
 height: 100%;
 }

.container{
   background-color: #999;
    padding: 20px;
    height:100%;
  }

.sidebar{
   background-color: #9999ff;
   float:left;
   width:30%;
   height:100%;
 }

.content{
   background-color: #99ff99;
   float:left;
   width:70%;
   height:100%
   }

这是我的 fiddle

demo

如果我为 child 设置 height:100% 意味着大部分内容都会溢出。

Answer 1

将 .container 显示为表格:

.container{
    background-color: #999;
    padding: 20px;
    display:table;
    height:100%;
}

.sidebar{
    background-color: #9999ff;
    display:table-cell;
    width:30%;
 }

.content{
    background-color: #99ff99;
    display:table-cell;
    width:70%;
}

http://jsfiddle.net/56C9v/15/