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;
}
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:
