Få #container att fylla hela sidan

Permalänk
Medlem

Få #container att fylla hela sidan

Hej,
jag har googlat ett bra tag nu och provat massa exempel men inte fått mitt problem löst (försöker mig lära mig lite html). På min sida snuken.org så vill jag att hela den vita baren ska gå ner till bottnen av sidan. Så här ser mina html och css filer ut;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> ---Snuken--- </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header">Snuken.org</div> <div id="content"> <p> <audio controls src="http://snuken.org:8000/mpd.ogg"> </p> <p>#sweden.bf3 @ Quakenet <br /> Minecraft server: snuken.org </p> <br /> <div id="contentbox"> <center> <ul id="navlist"> <li><a href="http://www.chaotech.se">Chaotech</a></li> </ul> </center> </div> </div> </div> </div> <div class="clear"></div> </body> </link> </html>

body { margin: 0px; padding: 0px; background-color: silver; text-align: center; height: 100%; } html { font-family: Verdana, sans-serif; font-size: 0.7em; margin: 0px; line-height: 1.5em; text-align: justify; padding: 0px; height: 100%; } #container { /*margin-top: 10px; margin-left: auto; margin-right: auto;*/ margin: 10px auto; width: 800px; text-align: center; position: relative; min-height: 100%; } #header { background-color: #343434; color: white; } #content { color: inherit; padding: 15px; margin: 0px; border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; background-color: white; min-height: 100%; } #contentbox { color: inherit; padding 15px; margin: 0px; border-top: 1px solid black; text-align: left; } #navlist li { display: inline; list-style: none; padding-right: 20px; }

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Permalänk
Medlem

Hej. För att #container ska sträcka sig över hela fönstret så bör den i detta fall ha height: 100% istället för min-height: 100%.

Visa signatur

Jobbar som webbutvecklare. Behärskar Photoshop, HTML(5), CSS(3), JavaScript(jQuery), PHP och MySQL. Novis på C++, Java och C#.

Permalänk
Medlem
Skrivet av viström:

Hej. För att #container ska sträcka sig över hela fönstret så bör den i detta fall ha height: 100% istället för min-height: 100%.

Provat det också men inga ändringar

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Permalänk
Medlem
Skrivet av Farner:

Provat det också men inga ändringar

Såg nu att jag skrev fel div. Menar såklart #content.

Sen bör du även kika igenom din kod lite. Ser att du har avslutat en div för mycket. Sen har du även avslut(</link>) på länken till CSS-filen och det är inkorrekt.

Och istället för <center> taggen så kan du centrera text i CSS. I ditt fall, #navlist{ text-align: center; }

Visa signatur

Jobbar som webbutvecklare. Behärskar Photoshop, HTML(5), CSS(3), JavaScript(jQuery), PHP och MySQL. Novis på C++, Java och C#.

Permalänk
Medlem
Skrivet av viström:

Såg nu att jag skrev fel div. Menar såklart #content.

Sen bör du även kika igenom din kod lite. Ser att du har avslutat en div för mycket. Sen har du även avslut(</link>) på länken till CSS-filen och det är inkorrekt.

Och istället för <center> taggen så kan du centrera text i CSS. I ditt fall, #navlist{ text-align: center; }

Tack, jag löste problemet

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Permalänk
Medlem
Skrivet av Farner:

Tack, jag löste problemet

Vad bra! Det kan vara lite bråkigt i början.

Visa signatur

Jobbar som webbutvecklare. Behärskar Photoshop, HTML(5), CSS(3), JavaScript(jQuery), PHP och MySQL. Novis på C++, Java och C#.