Wysokość bloków z css nie działa na stronie html

Question

Witam. Chciałem zrobić podstawowy zarys strony, żeby mieć jakiś filar i móc na tym pracować. Niestety utrudnia mi to fakt iż wysokość, którą ustawiam w kodzie nie jest odzwierciedlona na stronie html. Robiłem najpierw na znacznikach htmla 5 a potem na normalnych divach - efekt ten sam

#baner
{
	width:100%;
	height:20%;
	background-color:red;
}
.bok
{
	width:20%;
	height:100%;
	background-color:blue;
	float:left;
}
#kontent
{
	width:60%;
	height:100%;
	background-color: gray;
	float:left;
}
#stopka
{
	clear:both;
	background-color:black;
	width:100%;
	height:30%;
}

 

Comments

Zdefiniowałem container z wysokością i szerokością i ładnie śmiga. Dziękuję za porady. Zamykam

Answer 1

Pytanie jak pogrupowałeś to wszystko w htmlu, pamiętaj że % to jakaś część danej liczby. Dlatego jeżeli np wszystkie kontenery masz w body, a body nie ma wysokości, czyli wysokość jego jest równa 0px to każde 100% to 0px. Nadanie body atrybutu height z wartością 100% też nic nie da, bo tutaj zadziała zasada dziedziczenia. Kontenerowi nadrzędnemu warto nadać atrybut height ale z wartością zawartych w jednostkach wysokości monitora. Czyli VH http://webkod.pl/kurs-css/jednostki/relatywne/vh odsyłam.

Answer 2

Jednostka % zawsze odnosi się do rodzica. Np. jeśli dasz całą stronę w div container i dasz mu width: 80% to on weźmie te 80% od rodzica, czyli w tym przydadku body. Jeśli rodzice tych elementów co stylujesz mają height: 0 no to nieważne ile procent byś dał to i tak wyjdzie 0. Jeśli nie chcesz dawać nadrzędnemu elementowi wysokości spróbuj zmienić procenty na np. vh. Jeśli te jednostki nie są Ci znane to polecam ten film.