Witam. Otóż mam z pozoru banalny problem. Otóż umieszczam diva w divie i tak dalej. Nadaję ostatniemu wysokość 100% by pokrył się z wcześniej stworzonym. A tu bach! Według niego 100% wychodzi poza div'a . Ciężko to opisać, daję screena:

Kod wygląda tak:

[CSS] pobierz, plaintext 
div.comment {
min-height: 120px;
border: 1px solid #dddddd;
margin: 3px;
padding: 3px;
 
}
 
div.comment div.top {
border-bottom: 1px dotted #dddddd;
margin: 3px;
}
 
div.comment div.top a.user{
font-weight: bold;
}
div.comment div.top span.date{
float: right;
}
 
div.comment div.avatar {
border-right: 1px solid #dddddd;
padding: 4px;
min-height: 75px;
max-height: none; 
height: 100%; 
float: left;
overflow: hidden;
display:block;
background-color: #eeeeee;
}
div.comment div.avatar img.avatar{
border: 1px solid #dddddd;
margin: 5px;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="comment">
 
<div class="top">
<a href="dupa" class="user">Maxie</a>
<span class="date">24.01.2013</span>
</div>
 
<div class="avatar">
<img class="avatar" src="http://fc05.deviantart.net/fs40/f/2009/032/5/1/Reading__Icon_by_Jevanni.gif"><BR>
<a class="linkbutton"><img src="images/32.png"></a>
<a class="linkbutton"><img src="images/72.png"></a>
</div>
 
<div class="content">
kawaii!!! I love chibi ed! 
</div>
[HTML] pobierz, plaintext 

Co robię nie tak? Z góry dziękuję za pomoc!

zazwyczaj powoduje to padding i margin masz np 100% + margin czy też padding

Po pierwsze brakuje zamknięcia elementu <div /> najwyższego poziomu - być może tylko we wklejonym przez Ciebie kodzie, ale sprawdź to.

Druga sprawa to to, że z tym height: 100% to nie jest zawsze taka oczywista sprawa. Żeby taka reguła zadziałała, element nadrzędny musi mieć zadeklarowaną wysokość (w px lub %, ale w przypadku % cała reguła powtarza się z jego nadrzędnym elementem).

Poza tym:

[CSS] pobierz, plaintext 
div.comment div.avatar{
    ...
    float: left;
    ...
}
[CSS] pobierz, plaintext 

Jeśli chcesz, żeby taki element rozciągał na wysokość swój element nadrzędny, to masz dwa wyjścia. Nadać rodzicowi taki styl:

[CSS] pobierz, plaintext 
overflow: auto;
[CSS] pobierz, plaintext 

Lub przed zakończeniem rodzica dodać nowy, pusty element, ze stylem:

[CSS] pobierz, plaintext 
clear: both;
[CSS] pobierz, plaintext 

Z tym, że oba sposoby są mało eleganckie Jeśli ktoś zna lepsze, to chętnie je poznam.

Przy obydwu zmianach wysokość tego mojego 100% nadal jest taka sama a div.comment przystosowuje się do tego. Przy czym jeżeli treść diva będzie dłuższa niż div.avatar to i tak 100% to ignoruje i nie dostosowuje się do tego.

Jakieś inne pomysły dotyczące tego trefnego 100% :/

A czy przeczytałeś co napisałem powyżej?

W tym rzecz, że nie mogę ustalić takiej wartości bo zawartość nie jest zależna ode mnie. Jak to mogę ominąć?

Da się to osiągnąć jeszcze w jeden sposób - robiąc kombinację position: relative; i position: absolute;.

Zerknij na to: http://jsfiddle.net/rs9xm/

Zauważ, że nigdzie nie użyłem atrybutu CSS height. Ale na pewno będziesz potrzebował min-height dla przypadków, kiedy treść posta będzie bardzo krótka.

Pięknie dziękuję.
Oto rezultat: