Witajcie, potrzebuję pomocy kogoś bardziej doświadczonego ode mnie.
HTML:
<!DOCTYPE HTML>
<html lang="pl">
<head>
</head>
<body>
<div id="kontener1">
<div id="banner_logo"><img src="logo.png"></div>
<div id="banner_zegar"><</div>
<div id="menu">
<div class="menu_przycisk"><a href="index.php">Strona główna</a></div>
<div class="menu_przycisk"><a href="rejestracja.php">Rejestracja</a></div>
<div class="menu_przycisk"><a href="logowanie.php">Logowanie</a></div>
<div class="menu_przycisk"><a href="kontakt.php">Kontakt</a></div>
</div>
</div>
<div id="kontener2">
<div id="panelLewy"></div>
<div id="panelSrodkowy"></div>
<div id="panelPrawy"></div>
<div id="stopka"></div>
</div>
</body>
</html>
CSS:
body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#kontener1
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
min-width: 1000px;
background-color: black;
}
#banner_logo
{
position: absolute;
top: 10px;
left: 30px;
width: 208px;
height: 55px;
}
#banner_zegar
{
position: absolute;
top: 20px;
right: 30px;
font-size: 16px;
letter-spacing: 1px;
text-align: right;
}
#menu
{
position: absolute;
top: 80px;
left: 0;
right: 0;
height: 37px;
border-top: 1px solid red;
border-bottom: 2px solid black;
}
.menu_przycisk
{
display: inline-block;
height: 19px;
padding: 10px 10px;
font-size: 15px;
text-transform: uppercase;
}
#kontener2
{
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 25px;
min-width: 1000px;
min-height: 500px;
background-color: gray;
}
#panelLewy
{
position: absolute;
top: 0;
left: 0;
bottom: 25px;
width: 250px;
}
#panelSrodkowy
{
position: absolute;
top: 0;
left: 250px;
right: 250px;
bottom: 25px;
min-width: 500px;
border-left: 2px solid gray;
border-right: 2px solid gray;
}
#panelPrawy
{
position: absolute;
top: 0;
right: 0;
bottom: 25px;
width: 250px;
}
#stopka
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 20px;
padding-top: 5px;
background-color: black
font-size: 13px;
letter-spacing: 1px;
text-align: center;
}
Chciałbym uzyskać efekt polegający na tym, że kontener2 rozciąga się do samego dołu przeglądarki niezależnie od rozdzielczości ekranu. Tak, żeby zajmował całe dostępne miejsce. I to mi się udało.
Jednak oprócz tego chciałbym, żeby po wstawieniu zawartości do panelów (lewego, srodkowego albo prawego) znajdujących się w kontenerze2, kontener2 zwiększał swoją wysokość tak, żeby ją pomieścić pokazując wertykalne paski przewijania.
W tej chwili umieszczając zawartość w dowolnym panelu przekraczającą wysokość kontenera2 paski przewijania się pojawiają jednak zawartość wycieka z kontenera i niemieszcząca się część zamiast w kontenerze pojawia się na czarnym tle strony poniżej kontenera.
Czy da się w jakiś sposób to naprawić? Proszę Was o rady.
Pozdrawiam, Zainteresowany.
