全高右div

Question

我希望我的div高度为100％

HTML＆amp; 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;
 }

<强> DEMO

Answer 2

只需在div容器上添加一个高度：

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