css - css height:100% for childs 异常溢出

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%
   }

这是我的小提琴

演示

如果我为孩子做了 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/

Answer 2

我更新了你的小提琴

HTML：

<div class="container">
    <div class="wrapper">
        <div class="sidebar"></div>
        <div class="content"></div>
    </div>
</div>

CSS：

html{ 高度：100%；最小高度：100%；}

body{
    height: 100%;
}

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

.wrapper {
    position: relative;
}

.sidebar{
    background-color: #9999ff;
    float:left;
    width:30%;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

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