Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Nov 2002

css, div, height, 100% -problem

Hej!

Har försökt i flera dagar nu utan att lyckats.
Finns det någon här inne som har en lösning för hur jag ska kunna designa följande layout med CSS + html/xhtml

Modellen måste fungera felfritt i IE + FF + Safari.
Jag vill helst lösa det hela utan att behöva blanda in javascript.

En enkel förklaring till min layout finns på länken nedan;
http://img153.imageshack.us/img153/7979/divproblem2.gif

Tack på förhand!

Intel C2D E6400 @ 2.13GHz || Zalman CNPS9500LED • Gigabyte GA-965P-DS3 v.3 || Corsair TWIN2X 6400 DDR2 2x1GB || PowerColor Radeon X1900XT 256MB GDDR3 || Hiper Type-M 580W 18dB || Seagate Barracuda 7200.10 320GB SATA2 16MB 7200RPM

Trädvy Permalänk
Medlem
Registrerad
Dec 2004

I all hast, du kan ju själv testa i olika webbläsare.

<!DOCTYPE html> <html lang="sv"> <head> <style type="text/css"> <!-- html,body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #ffffcc; overflow: hidden; max-height: 100%; position: relative; text-align: center; } * html body { /*IE6 hack*/ padding: 300px 0 200px 0px; } * html div#div4 { height: 100%; width: 100%; } #div1 { margin: 0px auto 0px auto; padding: 0; width: 640px; height: auto !important; /* real browsers */ height: 100%; /* IE6: treaded as min-height*/ min-height: 100%; /* real browsers */ background-color: #cc99ff; } #div2 { height: 140px; width: 500px; position: fixed; top: 0; margin-left: 70px; background-color: #99ccff; } #div3 { background-color: #0066ff; top: 140px; bottom: 200px; width: 500px; position: absolute; overflow: auto; margin-left: 70px; } #div4 { width: 500px; height: 200px; z-index: 2; position: absolute; top: auto; bottom: 0px; background-color: #33ff66; margin-left: 70px; } #div5 { float: right; clear: right; width: 70px; background-color: #ff3333; } #div6 { float: right; clear: right; width: 70px; background-color: #cc0000; } --> </style> </head> <body> <div id="div1"> <div id="div2"> </div> <div id="div3"> </div> <div id="div4"> </div> <div id="div5"> </div> <div id="div6"> </div> </div> </body> </html>

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Okt 2007

Lånar denna gamla tråd. Försöker med samma sak och det funkar för sidor med kort innehåll, men när det blir längre innehåll så kapar den. Jag antar att ni använder Firebug så html <style> och CSS går att granska. Länk raderad pga sekretess.

Innehållet på hemsidan kan ni ju kolla om ni vill men det är i princip bara "lorem ipsum" tills jag kommit på nåt vettigt innehåll.

Helst vill jag att div site ska gå nästan längst ner och sen under den i det grå ska det stå nån copyrightgrej centrerad. Kan någon hjälpa mig med det?

sekretess

MacBook Pro 15" i5 520M 8GB GT330M 750GB

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Apr 2010

Du har ju max-height: 100% och overflow: hidden; så det är klart att det överflödiga försvinner.
Förstår inte varför du behöver det då du antagligen kommer ha så pass mycket info på varje sida att den sträcker sig ända ner, och om den inte gör det är det väl inte hela världen?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Okt 2007

Löste det med manuell höjd i pixlar istället. Men centrering av copyright-texten verkar inte funka som jag vill.

MacBook Pro 15" i5 520M 8GB GT330M 750GB