nicht angemeldet
navi mit height:100%
Hallo,
ich weiß, dass es zu dieser Frage unendlich viele Beiträge gibt, bekomme das, was ich umsetzen will, aber trotzdem nicht hin.
Ich möchte eine Seite entwerfen mit einem 800px breiten zentrierten container-div. Dieses div soll immer 100% höhe einnehmen.
Hierin soll ein header-div und ein navi-div stecken. Das navi-div soll links unterhalb des headers positioniert sein und auch immer eine höhe von 100% haben. Leider bekomme ich das nicht hin, obwohl ich fast alles, was ich hier oder woanders gefunden habe ausprobiert habe.
Hier meine index.htm:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="head"> head</div>
<div id="navi">navigation</div>
</div>
</body>
</html>
hier meine style.css:
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height: 100%;
border: thin dotted #000000;
width: 800px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
}
* #container {
height: 100%;
}
#head {
width: 795px;
border: thin dotted #FF0000;
margin-left:auto;
margin-right:auto;
}
#navi {
width:200px;
border: thin solid #0000FF;
min-height:100%;
float:left;
}
Ich habe schon so viel probiert, doch es treten immer andere Probleme auf. In dem hier geposteten Beispiel ist die container-box ca. 15px zu kurz und die navi-box läuft unten über diese herüber.
Vielleicht kann mir ja jemand helfen und diese "Standard-Frage speziell für diesen Fall beantworten.
-
Hallo jensemann,
Ich möchte eine Seite entwerfen mit einem 800px breiten zentrierten container-div. Dieses div soll immer 100% höhe einnehmen.
Hierin soll ein header-div und ein navi-div stecken. Das navi-div soll links unterhalb des headers positioniert sein und auch immer eine höhe von 100% haben. Leider bekomme ich das nicht hin, obwohl ich fast alles, was ich hier oder woanders gefunden habe ausprobiert habe.Bist Du sicher, daß die Navigationsbox als solche immer diese Höhe haben soll,
oder geht es Dir nur um den Hintergrund dieser Box, der bis unten durchlaufen soll?Für letztere Aufgabenstellung gibt es meines Wissens zwei Lösungsansätze:
-
der umgebenden Box ein Hintergrundbild verpassen, das den "Streifen" Navihintergrund enthält ("faux columns" wäre wohl das passende Suchwort)
-
kürzlich mal ausprobiert, auch sehr nett, habe noch keine Haken entdeckt: das Standard-Design der Webkrauts, wo die Navibox einen sehr großen Innenabstand (padding) und einen ebenso großen negativen Außenabstand (margin) erhält. Das umgebende Element bekommt dann noch ein overflow: hidden; mit, damit das Element unten gekappt wird.
Hilft Dir das weiter?
Gruß aus Köln-Ehrenfeld,
Elya
-
Hallo Elya,
Bist Du sicher, daß die Navigationsbox als solche immer diese Höhe haben soll,oder geht es Dir nur um den Hintergrund dieser Box, der bis unten durchlaufen soll?
Klar, es geht nur um den Hintergrund, da hasst Du schon recht.
Hilft Dir das weiter?
Das hilft mir weiter! Werde das Beispiel der Krauts mal ausprobieren. Klingt logisch. Danke!
Kennt jemand noch andere Ansätze?
Gruß Jensemann
-
