nicht angemeldet
variable höhe
hallo,
wahrscheinlich eine der häufigeren fragen. habe follgendes problem.
meine seite unterteilt sich in header, content, footer.
header und content haben eine fixe höhe. der content bereich soll variabel sein.
bsp:
hhhhhhhhh <- immer height:80px;
hhhhhhhhh
ccccccccc
ccccccccc <- dieser Bereich soll automatisch die Höhe ändern,
ccccccccc wenn das Browserfenster bewegt wird, also
ccccccccc 100% - (header + footer)
fffffffff <- immer height:50px;
fffffffff
ich hab schon rumverschachtelt wie ein blöder, finde aber keinen Lösungsansatz.
Hoffentlich kann mir einer helfen.
Danke
mat
-
Hallo Mat,
wahrscheinlich eine der häufigeren fragen. habe follgendes problem.
warum suchst du dann nicht im Archiv?
meine seite unterteilt sich in header, content, footer.
header und content haben eine fixe höhe. der content bereich soll variabel sein.
header und footer haben eine fixe höhe!
bsp:
hhhhhhhhh <- immer height:80px;
hhhhhhhhh
ccccccccc
ccccccccc <- dieser Bereich soll automatisch die Höhe ändern,
ccccccccc wenn das Browserfenster bewegt wird, also
ccccccccc 100% - (header + footer)
fffffffff <- immer height:50px;
fffffffffich hab schon rumverschachtelt wie ein blöder, finde aber keinen Lösungsansatz.
"rumverschachteln" alleine ist kein Allheilmittel...
Hoffentlich kann mir einer helfen.
Vielleicht...
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content-Height 100% - (Header + Footer)</title>
<style type="text/css">
<!--
html, body {height: 100%;margin:0;padding:0;}
div {width: 100%;}
-->
</style>
</head>
<body>
<div style="position:absolute;top:0;left:0;height: 80px;background:#cff;z-index:2;"><h3>Header</h3></div>
<div style="position:absolute;top: 0px;bottom:0px;height:100%;margin:0;background:#fcf;">
<div style="position:absolute;top: 80px;bottom:50px;margin:0;background:#fcf;overflow:auto;"><h3>Content</h3><h3>Content</h3><h3>Content</h3><h3>Content</h3></div>
</div>
<div style="position:absolute;left:0;bottom:0;height: 50px;background:#ffc;z-index:3;"><h3>Footer</h3></div>
</body>
</html>Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|-
Doctype beim Strg+C abgeschnitten - so ist's besser:
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content-Height 100% - (Header + Footer)</title>
<style type="text/css">
<!--
html, body {height: 100%;margin:0;padding:0;}
div {width: 100%;}
-->
</style>
</head>
<body>
<div style="position:absolute;top:0;left:0;height: 80px;background:#cff;z-index:2;"><h3>Header</h3></div>
<div style="position:absolute;top: 0px;bottom:0px;height:100%;margin:0;background:#fcf;">
<div style="position:absolute;top: 80px;bottom:50px;margin:0;background:#fcf;overflow:auto;"><h3>Content</h3><h3>Content</h3><h3>Content</h3><h3>Content</h3></div>
</div>
<div style="position:absolute;left:0;bottom:0;height: 50px;background:#ffc;z-index:3;"><h3>Footer</h3></div>
</body>
</html>Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A| -
Hallo Gunther,
vielen Dank für Deine Hilfe!!! Du hast mein Problem gelöst. Und nicht nur meines, ich habe heute soviele Foreneinträge gelesen, nicht nur hier, auch auf vielen anderen Seiten. Niemand hatte eine Lösung dafür.
Nur Du! :)
Deine Lösung werde ich mir ausdrucken und in einem Bilderrahmen über meinen Monitor hängen.warum suchst du dann nicht im Archiv?
hab ich ja, aber wie gesagt, oft gefragt, nie beantwortet.
"rumverschachteln" alleine ist kein Allheilmittel...
da hast du recht, doch du bist ohne verschachteln auch nicht ausgekommen ;)
Vielleicht...
Ganz sicher. Tausend Dank.
Gruß
mat
-
jetzt gibts doch wieder ein problem mit deiner lösung :(
was passiert wenn der inhalt des contents mehr ist, als dafür definiert ist?
dann liegt der footer drüber, weil z-index: 3; bei overflow:auto; oder
der inhalt geht drüber hinaus bei overflow: visible;wenn wir das noch lösen könnten, dann wäre ich glücklich ;)
danke
mat
-
Hallo Mat,
vielen Dank für Deine Hilfe!!! Du hast mein Problem gelöst.
bitte gern, aber gelöst ist dein Problem damit noch nicht,_denn_das war lediglich ein Ansatz, um dir aufzuzeigen, wie es vom System her gehen könnte. In der Praxis 'funktioniert' das nur in Browsern, die mit den Standards entsprechend umgehen können und leider nicht im IE!
Das Problem 'taucht' nämlich immer dann auf, wenn der Inhalt von #content höher ist als das Div.
Eine fertige Lösung für das IE-Problem habe ich leider auch nicht zur Hand. Wahrscheinlich ist es das Einfachste, man verwendet eine Javascript-Lösung (nur für den IE) und lässt die Divs (bei deaktiviertem JS) einfach im 'normalen Fluß'.Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|
-
-
-
Hallo Mat,
ich bin eben beim Surfen 'zufällig' über folgende Seite gestolpert http://www.stunicholls.myby.co.uk/layouts/index.html.
Sieht aus, wie das, was du suchst - vielleicht hilft es dir, der Lösung näher zu kommen.
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|