[CSS]DIVy w procentach znajdują się u góry


(Spectatorx) #1

Chcę zrobić stronę na div-ach składającą się z czterech divów rozmieszczonych jeden pod drugim. W css ustaliłem im szerokość na 100% i odpowiednie wysokości. Dlaczego wszystkie divy mają wysokość treści w nich zawartej i wszystkie znajdują się u góry? Wygląda to tak:

A kod css dla div-ów wygląda następująco:

div#logo

{

	width: 100%;

	height: 15%;

	margin: auto auto auto auto;

	text-align: center;

	background-color: #000;

}


div#menu

{

	width: 100%;

	height: 10%;

	margin: auto auto auto auto;

	text-align: center;

	background-color: #0f0;

}


div#content

{

	width: 100%;

	height: 60%;

	margin: auto auto auto auto;

	text-align: center;

	background-color: #00f;

}


div#foot

{

	width: 100%;

	height: 15%;

	margin: auto auto auto auto;

	text-align: center;

	background-color: #f00;

}

(athei) #2

Gdzie kod html?


(Spam) #3

Kod HTML nie jest potrzebny.

Autor tematu ustawił wysokość w procentach. W takim przypadku punktem odniesienia do obliczenia faktycznej wysokości jest wysokość aktualnego bloku (w twoim przypadku równe wysokości linii), dlatego zachowanie przeglądarki jest poprawne.

Przypuszczam, że chcesz ustawić wysokość procentową względem wysokości viewportu, czyli musisz dodać dodatkowy selektor wraz z odpowiednimi regułami, na przykład tak:

html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

(athei) #4

Jak nie jest potrzebny jak jest...

Co robią te średniki w kodzie w link, li.

Jeśli chcesz mieć wizualny efekt tych %, to ustaw sobie wysokość #top w pikselach.


(Spectatorx) #5

Z html, body to nie działa, ale dałem dodatkowego div-a ogarniającego wszystkie i one względem niego się ustawiają więc teraz jest w porządku. #-o