2013-05-31 8 views
0

я хочу, чтобы мой ДИВ быть высотой 100%Полная высота правой ДИВ

enter image description here

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

вы можете обеспечить установку JSFiddle? –

ответ

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

0

Просто добавьте Рост на вашем сНу контейнере:

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

Смежные вопросы