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 容器上添加一个高度：

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