|
|||
Problem mit DIV im DIV (height: 100%)
Hallo liebe XHTML-Forengemeinde,
so ich versuche auch mal meine first steps in CSS. Kenne zwar schon viele CSS Attribute, will mich aber jetzt endlich an komplette Layouts gewöhnen. Naja und da hab ich auch schon mein erstes Problem. Folgendes: Ich habe eine Website, die eine feste Breite von 900px hat und eine min-höhe von 730px. Diese Maße habe ich in einem DIV definiert, welches die anderen DIVs, und zwar eines für einen Kopfbereich, dann ein Menü (links) und rechts einen Content-Bereich (den hab ich aber hier erstmal rausgenommen) umschließt. Das Menü ist nun der Punkt, der mir schwierigkeiten macht: Ich möchte dass das Menü stets immer die Höhe des äussersten DIVs annimmt (das "border" div). Setze ich die höhe des DIVs auf 100%, so wird es im IE richtig angezeigt, aber leider nicht im Firefox. Daher würde ich gerne wissen, was ich falsch mache. Naja hier mal ein bisschen Code (unwichtiges hab ich entfernt): CSS: Code:
/* GENERAL STYLES */ html { font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 18px; text-decoration: none; padding:0; margin:0; border:0; } body { background: #FFFFF; padding:0; margin: auto; text-align: center; } /* PAGE DESIGN ELEMENTS */ #border { width: 900px; height: 730px; border: 0px; text-align: left; padding: 10px 0px 10px 0px; margin: 10px auto 20px auto; border: 1px solid red; } #top { width: 100%; height: 81px; background-image: url("images/top.png"); background-repeat: no-repeat; text-align: center; padding: 0px; } #menu { width: 220px; height: 100%; background-image: url("images/menu.png"); background-repeat: repeat-y; float: left; margin: 0; padding: 0; } Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>entwurf</title> <link rel="stylesheet" href="main_styles.css" type="text/css" /> </head> <body> <div id="border"> <div id="top"> </div> <div id="menu"> </div> <!-- <div id="content"> </div> --> </div> </body> </html> Ich danke Euch schon mal für Eure Hilfe! ~code_pilot |
Sponsored Links |
|
|||
Wenn der umschließende div-layer eine dynamische Höhe hat, kannst du darin keine 2 div-layer definieren, die immer genau gleich hoch sind. Stattdessen sorgt man nur dafür, dass es so aussieht, als seien sie gleich lang. Dieser Trick nennt sich faux columns. Dazu findest du einen guten Artikel auf www.alistapart.com und auch in der Suche des Forums.
|
Sponsored Links |
|
|||
Hallo,
bin neu hier und grad am Einsteigen in html/css... Bin schon seit gestern auf der Suche nach ner Lösung für ein ähnliches " 'height: 100%;' funktioniert nicht richtig" - Problem. Und beim Rumsuchen eben hier auf diesen thread gestoßen. Du (Achereto) schreibst, dass wenn ein umschließender div-layer eine dynamische höhe hat... usw. Aber ich bin den code durchgegangen und der umschließende div (in diesem Fall der #border - div) hat ja eben KEINE dynamische Höhe, sondern 'height: 730px;'. Also wie ist das also gemeint? Einfach nur für mein Verständnis... Thanx, TarAiym |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
z-index hoch, dennoch grafik nicht ganz oben | bergg | CSS | 6 | 27.10.2010 17:02 |
problem div height | TheBigGrin | CSS | 6 | 09.09.2008 12:04 |
Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 19:05 |
div, float und clear - Problem - IE vs. FF | jehmi | CSS | 11 | 10.06.2008 15:18 |
inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer) | Waldgeist | CSS | 6 | 14.02.2007 20:19 |