nicht angemeldet
Layout mit css kombination von relativer und fixer höhe
0 0 
Gunnar Bittersmann
0
Layout mit css kombination von relativer und fixer höhe
<!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>
<style type="text/css">
.eins {
background-color:#26354a;
height:116px;
width:327px;
position:absolute;
left:0px;
top:0px;
}
.zwei {
background-color:#26354a;
position:absolute;
left:327px;
top:0px;
width:100%;
height:116px;
}
.drei {
background-color:#ff6600;
height:1px;
position:absolute;
left:0;
top:116px;
width:100%;
height:5px;
}
.vier {
background-color:#d3dce6;
height:1px;
width:100%;
position:absolute;
left:0;
top:121px;
}
.fuenf {
background-color:#ffcc00;
height:20px;
width:100%;
position:absolute;
left:0px;
top:122px;
}
.sechs {
background-color:#d3dce6;
height:1px;
width:100%;
position:absolute;
left:0;
top:142px;
}
.sieben {
background-color:#ff6600;
height:1px;
position:absolute;
left:0;
top:143px;
width:100%;
height:5px;
}
.acht {
background-color:#26354a;
height:500px;
position:absolute;
width:200px;
left:0;
top:148px;
}
</style>
</head>
<body>
<div class="eins"><img src="grafiken/logo01.png" alt="Logo"/></div>
<div class="zwei">Hier kommt der Google Banner rein</div>
<div class="drei"></div>
<div class="vier"></div>
<div class="fuenf">Platz für das Menü</div>
<div class="sechs"></div>
<div class="sieben"></div>
<div class="acht">Links</div>
</body>
</html>
Ich versuche mich gerade neu am Layouten mittels CSS... nun möchte ich die linke Spalte so hoch machen, wie der Bildschirm ist. Wenn ich nun im Stilbereich height:100% mache erstreckt sich der Div-Container zu weit nach unten, d.h. er ist 100% des dargestellten Bereiches lang, jedoch möchte ich das er nur den Rest ausfüllt, also quasi 100%-148px hoch ist. Wie kann ich das umsetzen?
-
position:absolute;
...
position:absolute;
...
position:absolute;
...
position:absolute;
...nun möchte ich die linke Spalte so hoch machen, wie der Bildschirm ist. Wenn ich nun im Stilbereich height:100% mache erstreckt sich der Div-Container zu weit nach unten, d.h. er ist 100% des dargestellten Bereiches lang, jedoch möchte ich das er nur den Rest ausfüllt, also quasi 100%-148px hoch ist. Wie kann ich das umsetzen?
Nur mit Javascript.
Dein Problem ist deine absolute Positionierung. Diese besagt, nämlich: es ist mir scheiss egal, wie gross mein Parent-Context ist, ich bin so gross wie ich bin oder werde...Wenn du ein Layout willst das die Viewportgrösse berücksichtigt, solltest du auf absolute Positionierung verzichten. Ansonsten du schon eine komplexe Layout-Berechnung via Javascript anstellen musst.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
@@Sawascwoolf:
nuqneH
Wie kann ich das umsetzen?
Vor dem Wie kommt die Frage nach dem Warum.
Vielleicht ist ja eine Suche nach "faux colums" für dich lohnenswert.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck) -
Habe eine Lösung zu meinem Problem gefunden...
.inhalt2 {
position:absolute;
top:168px;
bottom:20px;
left:220px;
border:solid thin #CC00FF;
right:20px;
}Man gebe dem Div einfach Koordinaten von jeder Seite des Fensters, dadurch wird es automatisch angepasst.
P.s. Den rosa Rahmen hab ich nur zu testzwecken eingebaut ;)