CSS - Div Container Höhe automatisch anpassen
-
Hallo ich habe folgende HTML Struktur :
<!-- the outer wrapper - contains all elements of the web site --> <div id="wrapper"> <!-- the header wrapper for the top menu --> <div id="header-top-menu"> <jdoc:include type="modules" name="top-menu" /> </div> <!-- the header wrapper for the banner --> <div id="header-banner"></div> <!-- the header wrapper for the top menu --> <div id="header-main-menu"> <jdoc:include type="modules" name="main-menu" /> </div> <div id = "content"> </div> </div>ich möchte nun das der "Content" Container den gesamten restlichen Platz in der Höhe einnimmt. Ich habe bereits versucht über height: auto das zu regeln aber das klappt nicht. Ich habe irgendwo mal gelesen das man das über display: table-cell lösen kann - aber das habe ich bisher nicht geschafft.
Hier meine css datei:
/* ***************************************************** */ /* general properties for html and body */ html,body { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; height: 100%; /* set the background color */ background-color: #FFF9EF; font-family: Dejavu, sans-serif; } /* ***************************************************** */ #wrapper { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; /*center the wrapper */ margin: 0 auto; /* set the dimension for the wrapper */ height: 100%; width: 1024px; } /* ***************************************************** */ #header-top-menu { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; /* set the dimension for the wrapper */ height: 20px; max-height: 20px; width: 100%; } #header-top-menu ul { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; padding-top: 2px; /* set the dimension for the list */ height: 100%; width: 100%; /* set the text direction */ text-align: right; } #header-top-menu ul li { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; margin-left: 2px; margin-right: 2px; /* remove the list dot */ list-style: none; /* display the list elements in one line */ display: inline-block; } #header-top-menu ul li a { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; /* set the font properties */ font-size: 12px; font-weight: bold; color: #323232 } /* ***************************************************** */ #header-banner { /* default values for the distance to other objects*/ margin: 0px; padding: 0px; /* set the dimension for the wrapper */ height: 120px; max-height: 120px; width: 100%; /* set the background image*/ background: url("../images/banner-new.png"); /* set the border properties */ border-radius : 10px; border: 1px solid #323232; } /* ***************************************************** */ #header-main-menu{ /* default values for the distance to other objects*/ margin: 0px; padding: 0px; margin-top: 2px; /* set the dimension for the wrapper */ height: 50px; max-height: 50px; width: 100%; } #header-main-menu ul{ /* default values for the distance to other objects*/ margin: 0px; padding: 0px; padding-top: 2px; /* set the dimension for the list */ height: 100%; width: 100%; /* set the text direction */ text-align: center; } #header-main-menu ul li{ /* default values for the distance to other objects*/ margin: 0px; padding: 0px; margin-left: 2px; margin-right: 2px; /* set the dimension for the list elements */ width: 150px; max-width: 150px; /* remove the list dot */ list-style: none; /* display the list elements in one line */ display: inline-block; } #header-main-menu ul li a{ /* default values for the distance to other objects*/ margin: 0px; padding: 0px; /* set the font properties */ font-size: 20px; font-weight: bold; color: #323232 }kann mir jemand einen tipp geben.
vielen dank
-
Was genau passt dir denn nicht?
Einfach #content eine height:100% geben.Dann hast du natürlich 100% + die Höhe von header-*
Die haben aber eh eine fixe Höhe, also einfach content position:relative machen und per padding runter schieben (und hinter den header packen).Was für ein Layout willst du denn machen? uU muss ja content gar nicht eine fixe höhe haben? uU kann wrapper ja den background/border von content bekommen und content selber stellt nur den inhalt dar.
Ich würde auch die header-* elemente in ein eigenes div packen und die ganzen IDs wegschmeißen.
Generell sind so fixe Höhen aber eher unpraktisch und auch vorallem mobile eh eine katastrophe. Ich würde die gar nicht verwenden weil man sich heute im web sowieso am Inhalt orientiert -> da kannst du mit viel weniger aufwand ein viel schöneres design machen dass auch auf einem 27 zoller gut aussieht.
-
Hallo Vielen Dank für deine schnell Antwort. Ich möchte einen Header - Bereich haben, wo der Banner und das Top bzw Main Menu enthalten sind. Danach möchte ich den Content Bereich haben. der Soll den Rest der Seite ausfüllen.
Zum Schluss soll es noch einen Footer Bereich geben - der ist noch nicht implementiert.
Kannst du mir noch einen Tip geben für das Layout.
Vielen Dank
-
Was heißt für dich "der den Rest der Seite ausfüllt"?
Schau dir eine Seite wie Facebook, Twitter, sonstwas an. Der Inhalt füllt die Seite auch aus und es gibt einen Header. Aber der Content ist eben so hoch wie notwendig.
Mit diesem height:100% schmafu tust du ja nichts anderes als die Seite unnötig aufblasen wenn du keinen Content hast. In solchen Situationen ist ein min-height vielleicht sinnvoll.
PS:
oder geht da darum content scrollable zu machen um so den header immer oben anzuzeigen? Das geht per position:fixed (achtung: nicht mobil!) recht simpel. Was heute modern ist, ist ein scroll-then-fixed header. (wobei ich hier lieber waypoints verwende als jquery on scroll).Es hilft hier immer zu beschreiben welche funktionalität man erreichen will anstatt sich eine konkrete Lösung anzusehen. Denn du kannst, wie gesagt, auch den content immer auf 100% browser Höhe aufblasen aber meistens will man sowas gar nicht.