Höhe 100% in jedem Browser
0 
molily
0 0 Alternative Lösung
Höhe 100% in jedem Browser
Hallo zusammen,
ich bastel gerade an einem Layout und habe ein Problem mit der Höhe eines Elements.
Ich will auf der linken Seite einen blauen Balken anzeigen, der über die ganze Seitenhöhe geht.
<!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=ISO-8859-1" />
<title>Versuchstemplate Pfadiseite</title>
<style type="text/css">
<!--
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}
body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}
div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
html, body {
height: 100%;
}
/* DIV-Boxen */
div#wrapper {
position: relative;
margin: 0 auto;
width: 975px;
min-height: 100%;
height: auto !important;
height: 100%;
/*background: url(3cols.png) repeat-y;*/
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}
div#header {
height: 100px;
background: url(header.jpg);
}
div#leftCol {
width: 138px;
margin-top: 7px;
margin-left: 7px;
margin-bottom: 7px;
background: #004886;
height: 99%;
min-height: 99%;
height: auto !important;
border-right: 1px solid #b8b8b8;
float: left;
}
div#blueBox {
margin-top: 7px;
margin-left: 7px;
margin-bottom: 7px;
height: 99%;
height: auto !important;
min-height: 99%;
width: 138px;
background: #004886;
}
div#rightCol {
width: 175px;
border-left: 1px solid #b8b8b8;
float: right;
}
div#centerCol {
margin: 0 145px;
}
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* Überschrift, Absatz */
h2 {
margin-left: 10px;
}
-->
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
<h2>header</h2>
</div>
<div id="leftCol">
<!--<div id="blueBox">-->
<h2>leftCol</h2>
<!--</div>-->
</div>
<div id="rightCol">
<h2>rightCol</h2>
</div>
<div id="centerCol">
<h2>centerCol</h2>
</div>
</div>
</body>
</html>
Nur wird die Box nur so hoch angezeigt wie der Inhalt ist.
Kann mir jemand weiterhelfen?
Danke
Gruß
Markus
-
Offenbar liegts an dem min-height des #wrappers. Wenn der eine Höhe mit height hat, funktioniert auch die min-height des #leftCol. Vermutlich ist das so im CSS-Standard festgeschrieben. Nun würde die Benutzung von height dein Konzept ein wenig durcheinanderbringen, wenn der Inhalt höher als der Viewport wird. Insofern ist min-height besser, du könntest allerdings auch dem Wrapper width:100% und overflow:auto geben, sodass die Scrollbars darin angezeigt werden anstatt beim body.
Gleich lange Spalten sind auf unterschiedliche Art zu erzielen, je nachdem, wie das ganze letztlich aussehen soll. Willst du nur eine durchgängige Hintergrundfarbe haben, geht es noch am einfachsten, indem der Wrapper diese Hintergrundfarbe bekommt und die Kindelemente außer der linken Spalte diese Farbe mit einem eigenen Hintergrund überdecken.
Mathias
-
Hallo,
danke für die bisherigen Antworten. Leider kann ich euch nicht immer so ganz folgen.
Ziel ist es einen Header zu haben und dann eben drei Spalten darunter, die den gesamten Bildschirmausschnitt ausfüllen sollen. In der Linken Spalte soll ein blauer Balken angezeigt werden, der rundherum 7 px weißen Rand hat. Deshalb ist es mit dem hintergrundbild etwas schwierig.
Hat jemand ein Beispiel oder eine Seite bei der sowas schonmal versucht wurde?
Ich sitzte gerade wirklich auf dem trockenen mit Ideeen.
Gruß
Markus
-
-
hi,
Nur wird die Box nur so hoch angezeigt wie der Inhalt ist.
Welche der Boxen ist hier gemeint?
Kann mir jemand weiterhelfen?
Die Suchmaschine deiner Wahl mit dem Begriff „Faux Column“ füttern.
mfg
--
echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
array(2) {
["SELFCODE"]=>
string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
["Meaningful"]=>
string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
} -
Hallo!
ich bastel gerade an einem Layout und habe ein Problem mit der Höhe eines Elements.
Ich will auf der linken Seite einen blauen Balken anzeigen, der über die ganze Seitenhöhe geht.
Was spricht dagegen ein entsprechendes Hintergrundbild für den body zu verwenden?
Da die Breite _deiner_ linken Spalte bzw. blauen Box ohnehin nicht dynamisch ist, wäre das der erste Einfall von mir.Viele Grüße
ThorstenPS: Gut Pfad!
--
ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:)