Seite 1 von 1
CSS min-height bis zum Bildschirmrand....
Verfasst: 22.06.2011, 10:54
von Deathcore
Hallo Zusammen
ich habe untere Template-Achitektur aufgebaut.
Nun möchte ich dass der "main-container" mit dem Inhalt nach unten mitwächst aber immer mindestens bis zum unteren Bildschirmrand geht.
Aktuell wächst er zwar mit, aber hat immer nur die Höhe vom Inhalt (also falls nur ein Wort darin steht hat er auch nur die Höhe von einer Zeile...)
irgendwo steh ich auf dem Schlauch
hat wer eine Idee?
hier der code
Code: Alles auswählen
<div id="wrapper">
<div id="header"><h1>header</h1></div>
<div id="line1"><h1>line1</h1></div>
<div id="navigation-top"><h1>navigation-top</h1></div>
<div id="main"><h1>main</h1></div>
Code: Alles auswählen
html, body {
background-color: #333333;
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}
h1 {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #FFFFFF;
width: 970px;
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */
}
#header {
background-color: #FF0;
height: 150px;
}
#line1 {
background-color: #0F0;
height: 50px;
}
#navigation-top {
height: 80px;
background-color: #06F;
}
#main {
background-color: #CC6;
height:100%;
min-height: 100%; /* Mindesthöhe für moderne Browser */
}
Verfasst:
von
Hochwertiger Linkaufbau bei ABAKUS:
- Google-konformer Linkaufbau
- nachhaltiges Ranking
- Linkbuilding Angebote zu fairen Preisen
- internationale Backlinks
Wir bieten
Beratung und
Umsetzung.
Jetzt anfragen:
0511 / 300325-0
Verfasst: 22.06.2011, 11:03
von catcat
min-height: 768px; /* Mindesthöhe für moderne Browser */ oder so?
Die LowTecs können ja ruhig scrollen...
Verfasst: 22.06.2011, 11:14
von Deathcore
ja das wäre meine Notlösung
Ich wollt es gerne aber so perfekt wie möglich machen.
und Problem hier ist, dass ich von nun die Scrollbalken dahab (auch wenn der Content nicht den Bildschirm ausfüllt)
Verfasst: 22.06.2011, 11:19
von catcat
Wer achtet denn auf Scrollbalken?^^ - Die Otto-Normal-user wissen nich mal, was das ist.
Verfasst: 22.06.2011, 11:25
von chris21
Kannst Du nicht den Wrapper verwenden, um die Gestaltung des main festzusetzen?
Die anderen packst Du ja drüber, kannst also dort die wrapper Gestaltung überdecken.
Also z.B. dem Wrapper die Hintergrundfarbe des main geben / Hintergrundbild des Main geben / etc.
Ebenso bzgl Rahmen für Main: links / rechts und unten über wrapper, Rahmen oben für Main über main...
Verfasst: 22.06.2011, 11:27
von Synonym
Nun, der Ansatz ist ja eigentlich schon mal der richtige Weg.
was passiert denn, wenn die #main die gleichen Angaben gibst wie dem wrapper?
Also das hier:
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
vor allem auch in der Reihenfolge.
Verfasst: 22.06.2011, 11:29
von chris21
@Synonym: das hilft leider nicht
Habs gerade getestet. Man muss in den main irgendwas reinbekommen, dass seine Größe aufbläht. Andernfalls über den oben von mir vorgeschlagenen Weg gehen.
Aber ich teste hier auch gerade noch
Schönes Problem
Verfasst: 22.06.2011, 11:45
von Deathcore
@Synonym: das ist ja das lustige, da tut sich garnichst
@chris21: nee das will ich nicht machen. ich will dass die gestaltung komplett unabhängig vom gesammten wrapper ist. Würde zwar irgendwie auch gehen aber..... das muß doch irgendwie machbar sein
Verfasst: 22.06.2011, 11:50
von catcat
Und wenn Du ein transparentes gif mit 100% height und 1px width reintust? In den wrapper.
Oder Du ermittelst die Browsereinstellungen des Users und stellst die Höhe danach ein?
Und mach mal das height:auto !important; /* Important Regel für moderne Browser */ raus. Da kannst Du eintragen was Du willst und das wird nix.
Verfasst: 22.06.2011, 11:51
von Synonym
Also ich hab da nun auch nur mal kurz rumgespielt.
Wenn ich beim wrapper das overflow entferne und ein position:relative dazu gebe und dann beim #main ein position:abolute, dann geht der #main bei mir im FF auf 100% zwischen "navi-top" und Unterkante Fenster.
Bei mehr Text im Main wird nach unten erweitert. Allerdings "vergrößert" sich dann der Wrapper nicht automatisch..... hm...
Edit... Nee, doch nicht, dann ist der #main zu groß.
Verfasst: 22.06.2011, 22:22
von Medium
versteh ich nicht, die Ganzen min-height und height 100% brauchst du doch gar nicht.
#main {
position:absolute;
top:270px;
bottom:0;
width:970px;
background-color: #CC6;
}
die ganzen Höhen im wrapper brauchste auch nicht
#wrapper {
background-color: #FFFFFF;
width: 970px;
margin:0 auto; /* Div soll zentriert werden */
}
und dann sollte es doch funktionieren ...
Verfasst: 27.06.2011, 07:52
von Deathcore
sorry für die verspätete Antwort, war leider unterwegs.
Da ich in dem schönen Wetter keine Lust mehr hatte. Hab ich dann wirklich die Gestaltung des "Main-content" in den Wrapper übernommenb
