Skocz do zawartości

[XHTML/CSS] Prosty layout nie rozciąga się...


kage20

Polecane posty

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ć. a wszystko przez to że gdy nie określimy wysokości #wrappera w pixelach tylko w % to height dla contenta i sidebara jest brany na podstawie html, body;/ 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

Link do komentarza
Udostępnij na innych stronach

  • 5 months later...

Co do rozciągania to w #content dodaj " overflow: hidden; "

A wymiary to już nie wiem :] ale nie widzę sensu ograniczać się do wymiarów okna...

Można osiągnąć wymiary po przez zmniejszenie height na 94% w html, body, ale to nie działa idealnie.

Prawdziwy programista wiesza sie wraz ze swoim programem.

Link do komentarza
Udostępnij na innych stronach

Tak jak pewnie większość ludzi ja też uważam iż jest to bardzo głupi pomysł ograniczać się do wysokości ekranu ;p

 

Oto działający kod może coś być zbędnego bo nie chciało mi się sprawdzać tongue.gif

 

<!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>
*{
margin: auto;
padding: 0;
}

html, body {
height: 100%;
min-width: 960px;
overflow: hidden;
}

#header {
height: 50px;
width: 100%;
position: absolute; top: 0px; left: 0px;
background-color: #505050;
text-align: center;
color: #ffffff;
}

#content{
height: 100%;
padding: 50px 0 20px 0;
}

#sidebar {
float: left;
width: 200px;
height: 100%;
background-color: #808080;
}

#newsBox {
height: 100%;
background-color: #eeeeee;
}

#footer {
clear: both;
height: 20px;
width: 100%;
position: absolute; bottom: 0px; left: 0px;
background-color: black;
color: white;
}
</style>
</head>
<body>

<div id="header">tytul</div>

<div id="content">
<div id="sidebar">menu</div>
<div id="newsBox">jakis tekst</div>
</div>

<div id="footer">stopka</div>

</body>

Link do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.

×
×
  • Utwórz nowe...