URL: https://www.overclockers.at/coding-stuff/css-100-height_224392/page_1 - zur Vollversion wechseln!
Hallo,
Ich bin schön langsam am verzweifeln ich bekomme es einfach nicht hin das mein Layout 100% Höhe hat und dann einfach weiterwachsen soll wenn mehr Inhalt dort ist.
Ich hoffe ihr könnt mir da weiterhelfen.
die website wäre auch hier live zum ansehen
index.html
Code: HTML<!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" xml:lang="en"> <head> <title>Unbenannt</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="generator" content="Geany 0.20" /> <link rel="stylesheet" href="immo.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-foto"> </div> <div id="logo"> </div> </div> <div id="topmenu"><ul><li class="first active"><a href="http://localhost/" title="Home" >Home</a></li> <li><a href="impressum.html" title="Impressum" >Impressum</a></li> <li class="last"><a href="kontakt.html" title="Kontakt" >Kontakt</a></li> </ul></div> <div id="main-wrapper"> <div id="navigation"><ul><li class="first"><a href="#" title="" >Link</a><ul><li class="first"><a href="#" title="" >Link</a></li> <li class="last"><a href="#" title="" >Link</a></li> </ul></li> <li><a href="#" title="" >Link</a><ul><li class="first"><a href="#" title="" >Link</a></li> <li class="last"><a href="#" title="" >Link</a></li> </ul></li> <li class="last"><a href="#" title="" >Link</a></li> </ul></div> <div id="content"> <h1>Home</h1> <p><p>Impressum</p><p> </div> </div> <div id="footer"> </div> </div> </body> </html>
Code: CSS* { margin:0; padding:0; } html, body { margin:0; padding:0; min-height: 100%; /* Fuer moderne Browser */ height: auto !important; /* Fuer moderne Browser */ height: 100%; /* Fuer IE */ font-family: helvetica, arial sans-serif; text-align: left; background-image:url(../images/bg.jpg); background-repeat:repeat; } .error { color:red; font-style:italic; font-size:12px; } img { border:0; } #wrapper { width: 100%; min-height: 100%; /* Fuer moderne Browser */ height: auto !important; /* Fuer moderne Browser */ height: 100%; /* Fuer IE */ } #header { width: 780px; height: 150px; background-color: gray; margin:0px auto; border-left: 25px solid #ffffff; border-right: 25px solid #ffffff; } #header-foto { width: 450px; height: 100%; background-color: white; float: left; } #logo { width: 330px; height: 100%; background-color: grey; float: right; } #topmenu { clear: both; width: 780px; background-color: black; margin:0px auto; border-left: 25px solid #ffffff; border-right: 25px solid #ffffff; letter-spacing: 1px; height: 35px; } #topmenu ul { text-align: right; padding-bottom: 0px; padding-top: 0px; padding-left: 0; margin-top: 0; /* cancels gap caused by top padding in Opera 7.54 */ margin-left: 0; background-color: #000; color: white; width: 100%; font-family: Arial,Helvetica,sans-serif; height: 35px; line-height: 35px; /* fixes Firefox 0.9.3 */ } #topmenu ul li { display: inline; padding-left: 0; padding-right: 0; padding-bottom: 5px; /* matches link padding except for left and right */ padding-top: 5px; } #topmenu ul li a { padding-left: 10px; padding-right: 10px; padding-bottom: 8px; padding-top: 8px; color: white; text-decoration: none; } #topmenu ul li a:hover { background-color: #fff; color: #000; } #main-wrapper { width: 780px; margin:0px auto; border-left: 25px solid #ffffff; border-right: 25px solid #ffffff; min-height: 100%; /* Fuer moderne Browser */ height: auto !important; /* Fuer moderne Browser */ height: 100%; /* Fuer IE */ } #navigation { width: 200px; background-color: grey; float: left; min-height: 100%; /* Fuer moderne Browser */ height: auto !important; /* Fuer moderne Browser */ height: 100%; /* Fuer IE */ } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation li { border-bottom: 1px solid #ED9F9F; } #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; } #navigation li a:hover { background-color: #711515; color: #FFFFFF; } * html #navigation li a { width: 100%; } #navigation ul ul { margin-left: 12px; } #navigation ul ul li { border-bottom: 1px solid #711515; margin:0; } #navigation ul ul a:link, #navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; } #navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; } #content { width: 560px; background-color: #ffffff; float: right; padding: 10px; min-height: 100%; /* Fuer moderne Browser */ height: auto !important; /* Fuer moderne Browser */ height: 100%; /* Fuer IE */ } #footer { clear: both; width: 780px; margin:0px auto; height: 25px; background-color: black; margin-bottom: 15px; border-left: 25px solid #ffffff; border-right: 25px solid #ffffff; }
mach mal alle
weg und änder alleCode: CSSheight: auto !important;
inCode: CSSmin-height: 100%;
Code: CSSheight: 100%;
Danke das height: auto !important; war daran schuld.
min-height funktioniert bei mir im FF und IE9
das einzige Problem was ich jetzt noch hab ist das es nicht 100% der Seitenhöhe ist sondern mehr, ich schätz einmal da die Höhe zurzeit 100%+150px(header)+25px(footer) sein wird... kann man das irgendwie mit css lösen oder muss ich da eine JavaScript oder dergleichen einbauen?
du verwendest im body min-height UND height gleichzeitig also wirds afaik höher als 100%.
hmmm hilft leider auch nichts, wenn ich das min-height wegnehme ist der selbe effekt...
Gibt dem body einfach ein padding in höhe der px der anderen Elemente...
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025