php - 全高の右 div

Question

div の高さを 100% にしたい

HTML & CSS コード

HTML

<div>
    <div class="content-box news-box" style="float: right">news section</div>
    <div class="content-box slider-box" style="height: 150px;">slider box</div>
    <div class="content-box plan-box">plan box</div>
    <div class="clr"></div>
</div>

CSS

.content-box{
    background-color: #d54515;
    border-radius: 2px;
}

.news-box{
    width: 19.5%;
    height: 100%;
}

.slider-box{
    width: 79%;
}

.plan-box{
    width: 79%;
    margin-top: 20px;
}

Answer 1

追加 position:absolute; right:0と.news-box位置: 親 div に相対的

浮きを取り除く

 .wrapper{
    border:solid green 1px;
    position:relative
 }
 .content-box{
    background-color: #d54515;
    border-radius: 2px;
    height: height: 100%;
 }
 .news-box{
    width: 19.5%;
    height: 100%;   
    position:absolute;
    right:0    
 }
 .slider-box{
    width: 79%; 
 }
 .plan-box{
    width: 79%;
    margin-top: 20px;
 }

デモ

Answer 2

div コンテナに Height を追加するだけです:

<div class="container">
    <div class="content-box news-box" style="float: right">news section</div>
    <div class="content-box slider-box" style="height: 150px;">slider box</div>
    <div class="content-box plan-box">plan box</div>
    <div class="clr"></div>
</div>

そしてCSSコード：

.content-box{
    background-color: #d54515;
    border-radius: 2px;
    border: 1px #000 solid;
}

.container{
    height: 200px;    
}

.news-box{
    width: 19.5%;
    height: 100%;
}

.slider-box{
    width: 79%;
}

.plan-box{
    width: 79%;
    margin-top: 20px;
}

デモ: http://jsfiddle.net/xkZ49/