nicht angemeldet
Probleme mit height
Gunnar BittersmannHallo,
ich habe das Problem, das meine height für 100% im Content nicht hinhaut. Ich möchte eine Navigation erstellen die 100% der restlichen Bildschirmhöhe einnimmt. Das ganze noch mit einer Hintergrundfarbe welche ebenfalls die restliche Höhe einnimmt. Momentan füllt er den Bereich nur mit soviel Farbe wie ich Text in der Navigation habe.
Hier ist das entsprechende HTML, darunter das css ausgelagert in einer Datei. Wer kann mir helfen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="style/becker_style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="box">
<div class="top">
<img src="images/top_header_home.jpg" alt="" />
</div>
<div class="menu">
<a href="">Home</a>
<a href="">Philosophie</a>
<a href="">Mein Traumhaus</a>
<a href="">Leistungen</a>
<a href="">Referenzen</a>
<a href="">Zertifizierung</a>
<a href="">News</a>
<a href="">Impressum</a>
<a href="">Kontakt</a>
</div>
</div>
<div class="content">
<h2>content</h2>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
*{
padding:0;
margin:0;
border:0;
}
html, body {
height: 100.01%; /* wichtig */
text-align:left;
}
body {
background-color:#5C656F;
font-family:verdana, arial, sans-serif;
font-size:0.6em;
}
.header{
height:170px;
background:#ccc;
}
p {
margin: 0;
padding: 1em 0;
line-height: 1.5em;
}
.box{
width:790px;
margin:0 0;
text-align:left;
position: relative;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
background:#fff;
}
.inhalt {
padding: 0 2em 60px 2em;
}
.menu {
min-height:100%;
margin:0 0;
position:relative;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
width:130px;
float:left;
background-color:#74887E;
}
.menu a {
color:#000000;
font-weight:normal;
text-decoration:none;
padding: 4px 0px 4px 15px;
display:block;
}
.menu a:hover {
background-image:url(../images/menu_arrow_pic.gif);
color:#F7BD5D;
font-weight:normal;
background-position:center left;
text-decoration:none;
background-repeat:no-repeat;
}
a, a:link, a:visited, a:active {
color:#ffffff;
font-weight:normal;
text-decoration:none;
}
a:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
a.white, a.white:link, a.white:visited, a.white:active {
color:#ffffff;
font-weight:normal;
text-decoration:none;
}
a.white:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
a.content, a.content:link, a.content:visited, a.content:active {
color:#999999;
font-weight:normal;
text-decoration:none;
}
a.content:hover {
color:#5C656F;
font-weight:normal;
text-decoration:none;
}
.footer {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 20px;
line-height: 20px;
text-align:center;
}
Gruss
Tom
-
Hello out there!
ich habe das Problem, das meine height für 100% im Content nicht hinhaut. Ich möchte eine Navigation erstellen die 100% der restlichen Bildschirmhöhe einnimmt. Das ganze noch mit einer Hintergrundfarbe welche ebenfalls die restliche Höhe einnimmt. Momentan füllt er den Bereich nur mit soviel Farbe wie ich Text in der Navigation habe.
Mit
.menu {float: left}nimmst du die Box aus dem Fluss, deshalb beziehen sich Höhenangaben in Prozent nicht mehr auf das Elternelement.<div class="menu">
<a href="">Home</a>
<a href="">Philosophie</a>
<a href="">Mein Traumhaus</a>
<a href="">Leistungen</a>
<a href="">Referenzen</a>
<a href="">Zertifizierung</a>
<a href="">News</a>
<a href="">Impressum</a>
<a href="">Kontakt</a>
</div>„Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1“ (frei nach [wahsaga])
Und warum vergibst du für einmalig auftretende Elemente Klassen und keine IDs?
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar,
Mit
.menu {float: left}nimmst du die Box aus dem Fluss, deshalb beziehen sich Höhenangaben in Prozent nicht mehr auf das Elternelement... Und was kann ich dagegen tun. Wenn ich das float rausnehme ist das Problem trotzdem noch.
Gruss
Thomas-
Hello out there!
Mit
.menu {float: left}nimmst du die Box aus dem Fluss, deshalb beziehen sich Höhenangaben in Prozent nicht mehr auf das Elternelement.Vergiss das wieder. Tun wir so, als hätt ich das nie geschrieben.
Wenn du nicht
.box {height: auto; min-height: 100%}, sondern.box {height: 100%}angibst, geht die Box 'menu' („Ich möchte furchtbar gern eine ID sein, bitte bitte lass mich doch ...!!!1“) über die Viewporthöhe.Welchen Zweck hat die Angabe
.menu {position: relative}?See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo,
Wenn du nicht
.box {height: auto; min-height: 100%}, sondern.box {height: 100%}angibst, geht die Box 'menu' („Ich möchte furchtbar gern eine ID sein, bitte bitte lass mich doch ...!!!1“) über die Viewporthöhe.Dann läuft das Menü aber nach unten weg über den footer hinaus und die Seite hat mehr als 100% Höhe.
Gruss
Thomas
-
-
-