Witam,
wcześniej tworzyłem zawsze layout na tabelkach ale uznałem że czas się nauczyć na divach. Ale do rzeczy:
mój layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
html, body {
margin: 0px auto;
padding: 0px;
height: 100%;
}
#wrapper {
background-color: #aaaaaa;
min-width:960px;
height: 100%;
}
#header {
height: 50px;
background-color: #505050;
text-align: center;
color: #ffffff;
}
#sidebar {
float: left;
width: 200px;
height: 100%;
background-color: #808080;
}
#content {
height: 100%;
background-color: #eeeeee;
}
#footer {
clear: both;
height: 20px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">tytul</div>
<div id="sidebar">menu</div>
<div id="content">jakis tekst</div>
<div id="footer">stopka</div>
</div>
</body>
</html>
jak widać banalny #wrapper i w nim wszystkie elementy layoutu czyli header, lewe menu content i stopka. Problem jest z rozciąganiem lewego menu (#sidebar) i tresci strony (#content) w dół do 100% wysokości ekranu przeglądarki. Gdy usuniemy z #sidebar i #content właściwość height: 100% to te dwa divy juz się nie rozciągają w dół niestety natomiast z nimi jak widać przy height:100% cały layout z headerem i footerem wychodzi poza wysokość ekranu przeglądarki dokładnie o zsumowane wysokości headera 50px i footera 20px (czyli 70px)... na tabelkach nie ma takich problemów z rozciąganiem w dół czy w bok ekranu bo są spójne jako całość a na divach nijak nie moge tego efektu uzyskać. Patrzylem już wiele przykładów w internecie i nie znalazłem rozwiązania dla siebie. Potrzebuje layoutu z headerem stopka lewym menu i contentem i żeby się rozciągał do końca ekranu przeglądarki w dół. Wie ktoś jak to zrobić?
z góry dzięki