css - css height:100% 異常にオーバーフローした子の場合

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

私はあなたのフィドルを更新しました

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

Answer 2

.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/