Как показать высоту div?

Question

Css:

#container 
    { 
    position:relative; 
    left: 27%; 
    width: 50%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7); 
    } 

Html:

<div id="container"> 
<div id="banner"><img src="images/banner.png" border=0></div> 
<div id="text"><p>Text</p></div> 
    </div> 

В зависимости от размера текста, высота #container увеличивается ... из-за того, что я не могу переместить текст в нижней части, я не знаю, почему, но #container действует как обертка в истинных средствах слова, есть ли другой способ изменить это?

Answer 1

Я боролся с позиционированием div за последние несколько месяцев, и это все еще расстраивает.

Я сделал это:

CSS

#container { 
    position:relative; 
    left: 27%; 
    width: 50%; 
    height: 100%; 
    background-color:red; 
} 

#banner { 
    height:100px; 
    width:100%; 
    background-color:lightblue; 
} 

#text { 
    font-size:24px; 
} 

HTML

<div id="container"> 
<div id="banner">picture</div> 
<div id="text">Text</div> 
</div> 

И это дает мне "картину" на вершине, и текст прямо под картинкой.

Это вы что искали?