kage20 Napisano Grudzień 8, 2010 Zgłoś Share Napisano Grudzień 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 Link do komentarza Udostępnij na innych stronach More sharing options...
antykprk Napisano Maj 13, 2011 Zgłoś Share Napisano Maj 13, 2011 A nie da się tego osiągnąć poprzez absolutne pozycjonowanie? Link do komentarza Udostępnij na innych stronach More sharing options...
DevPort Napisano Maj 13, 2011 Zgłoś Share Napisano Maj 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. Prawdziwy programista wiesza sie wraz ze swoim programem. Link do komentarza Udostępnij na innych stronach More sharing options...
Stelma Napisano Maj 13, 2011 Zgłoś Share Napisano Maj 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> Link do komentarza Udostępnij na innych stronach More sharing options...
Polecane posty
Zarchiwizowany
Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.