nicht angemeldet
Div height 100% + Container
Hallo
ich habe ein Layout was nicht ganz passt.
body {
padding:0;
margin:0;
height:100%;
}
html {
height:100%;
}
Oben ist ein Header-Div mit einer festen Höhe.
Darunter ein Content-Div mit 100% height.
Das funktioniert auch so ganz gut, bis auf das Problem, dass der Content-Div die Höhe von dem Header-Div zu den 100% dazurechnet...
Wie kann ich das umgehen?
-
Hi
Das funktioniert auch so ganz gut, bis auf das Problem, dass der Content-Div die Höhe von dem Header-Div zu den 100% dazurechnet...
Suche benutzen ;-)
Du gibst dem Content-Div
position: absolute;
top: 0;
margin-top: 100px;margin-top ist die Höhe die der Header-Div hat.
Grüße
-
position: absolute;
Sorry,
ich meinte
position: fixed;-
position: absolute;
Sorry,
ich meinte
position: fixed;Hi,
danke für deine Hilfe. Das klappt soweit. Jetzt kann ich aber nicht mehr scrollen???-
Hi,
die oben vorgeschlagene Lösung über position ist auch
1. unnötig kompliziert und generell nicht empfehlenswert
(z.B. Probleme mit Ankern, vgl. dazu etwa Molily's Artikel: http://molily.de/css-position-fixed)und funktioniert 2. so sowieso nicht im IE 6.
Eine mögliche bessere Lösung wenn mitsamt allen Elementen ganz normal gescrolled werden soll:
Lass es einfach so, wie du's hattest und leg den header in das content div. Und alle weiteren in Folge darunter. Fertig.Gruß
Antipitch-
- unnötig kompliziert und generell nicht empfehlenswert
(z.B. Probleme mit Ankern, vgl. dazu etwa Molily's Artikel: http://molily.de/css-position-fixed)
und funktioniert 2. so sowieso nicht im IE 6.
Eine mögliche bessere Lösung wenn mitsamt allen Elementen ganz normal gescrolled werden soll:
Lass es einfach so, wie du's hattest und leg den header in das content div. Und alle weiteren in Folge darunter. Fertig.Hi,
auch deine Lösung funktioniert nicht in IE6!!Jemand noch eine Idee?
Grüße
-
Bitte?
Was siehst du denn in deinem IE 6, wenn du dir das hier anguckst?
----------------------------------------------------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title><style type="text/css">
body {
padding:0;
margin:0;
height:100%;
}
html {
height:100%;
}
#content {
height: 100%;
background-color: #999999;
}
#header {
width: 100%;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="content">
<div id="header"> </div>
</div>
</body>
</html>---------------------------------------------------------------
Gruß
Antipitch-
Was siehst du denn in deinem IE 6, wenn du dir das hier anguckst?
Im IE6 sieht das noch okay aus, ich meinte den IE7 und Firefox sobald du ne Menge Text drin hast, geht der Hintergrund immer nur bis 100% Höhe und wenn man dann scrollen muss hört darunter der Hintergrund auf
Komisch!?
-
Hm klingt interessant.
Wenn man bei deinem Beispiel bei
#content {
min-height:100%;
background-color: #999999;
}eben min-height anstatt height macht, dann siehts im firefox + ie7 wieder perfekt aus, auch wenn man scrollt.
jedoch siehts im ie6 wieder mit weißem rand unten aus, wenn die seite nicht komplett mit inhalt gefüllt ist...
-
Hi tenns,
eben min-height anstatt height macht, dann siehts im firefox + ie7 wieder perfekt aus, auch wenn man scrollt.
jedoch siehts im ie6 wieder mit weißem rand unten aus, wenn die seite nicht komplett mit inhalt gefüllt ist...
Dafür (IE 6) nimmst du dann nen einfachen hack:
#content {
min-height:100%;
background-color: #999999;
}* html #content { /* IE Hack for 100% height */
height: 100%;
}Gruß
AntipitchPS: Was ist denn der weitere Sinn deiner 100% height?
-
Dafür (IE 6) nimmst du dann nen einfachen hack:
#content {
min-height:100%;
background-color: #999999;
}* html #content { /* IE Hack for 100% height */
height: 100%;
}Klappt wunderbar, jetzt siehts überall toll aus ;-)
Danke für deine HilfePS: Was ist denn der weitere Sinn deiner 100% height?
Na dass Navigationsbalken bis an den Seitenrand gehen und der Inhalt auch über die ganze Seite einen Hintergrund hat auch wenn er nur eine Zeile Text beinhaltet...
Sonst hat man da noch n weißen Leerraum, sieht kacke aus...
-
Klappt wunderbar, jetzt siehts überall toll aus ;-)
Danke für deine Hilfeprego!
Na dass Navigationsbalken bis an den Seitenrand gehen und der Inhalt auch über die ganze Seite einen Hintergrund hat auch wenn er nur eine Zeile Text beinhaltet...
Sonst hat man da noch n weißen Leerraum, sieht kacke aus...
Alright. Viel Spaß weiter...
Gruß
Antipitch
-
-
-
-
-
- unnötig kompliziert und generell nicht empfehlenswert
-
-
-
-