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

kage20 · December 8, 2010

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

antykprk · May 13, 2011

A nie da się tego osiągnąć poprzez absolutne pozycjonowanie?

DevPort · May 13, 2011

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.

Stelma · May 13, 2011

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ć

<!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>

Sign In

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

Recommended Posts

kage20

Link to comment

Share on other sites

antykprk

Link to comment

Share on other sites

DevPort

Link to comment

Share on other sites

Stelma

Link to comment

Share on other sites

Archived

Browse

Activity