- na górze logo; width: 100%; height: 87px;
- teraz niżej jest menu po lewej; width: 200px; height: 100%;
- obok menu - po prawej stronie jest miejsce na treść
Problem w tym, że strona jest biała, a menu ma tło niebieskie i ten div z menu nie dochodzi do końca strony - dół ekranu. W internecie wyczytałem, że to dlatego, że nie została nadana wartość dla rodzica, czyli:
Kod
html, body { height: 100%; }
Jak to zrobiłem na próbe bez loga - zakomentowałem w htmlu DIV z logiem, to menu było super idealnie rozciągnięte, czyli od samej góry, aż po dolną krawędź ekranu. Jednak gdy odkomentowałem DIV z logiem, to menu miało wysokość strony + te 87px co ma logo, czyli ponad stronę - pojawia się suwak. Słyszałem, że można zrobić to w JS, tzn pobrać wysokość ekranu, potem sobie od tego odejmę wysokość diva z logiem (87px) i dostanę wysokość diva z menu. Ale może można to zrobić w samym CSSie?
Fragment mojego kodu CSS:
Kod
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#logo {
background-image: url('grafika/logo.jpg');
width: 100%;
height: 87px;
}
#menu {
background-color: #6F86F2;
width: 200px;
height: auto;
margin: 0px;
float: left;
}
margin: 0;
padding: 0;
height: 100%;
}
#logo {
background-image: url('grafika/logo.jpg');
width: 100%;
height: 87px;
}
#menu {
background-color: #6F86F2;
width: 200px;
height: auto;
margin: 0px;
float: left;
}
A tu kod główny strony:
Kod
<body>
<div id="logo"> </div>
<div id="menu">
<?php include('menu.php'); ?>
</div>
<div id="screen">Tutaj treść</div>
</body>
<div id="logo"> </div>
<div id="menu">
<?php include('menu.php'); ?>
</div>
<div id="screen">Tutaj treść</div>
</body>
.
