nicht angemeldet
Menü-Spalte links soll bis zum unteren Bildschirmrand gehen
Hallo,
ich versuche mich seit gestern an diesem Layout:
http://css.fractatulum.net/sample/layout1.htm
Ich will allerdings, dass die linke Menü-Spalte (.box2) nicht height:400px hat, sondern so lang wie die angezeigte Seite ist (100%). Wenn ich aber height:100% eingebe, ist die Seite länger als der Bildschirm. Ich bin schon ganz verzweifelt, kann mir bitte jemand einen Tipp geben. Danke schön!
Mini-Uschi
Hier der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS-Layout 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body
{
color :black ;
background-color:#f0f0f0;
font-family : verdana, helvetica, sans-serif;
font-size : 13px;
margin : 0px;
padding:0px;
}
.box1{background:gainsboro;padding:5px;border:1px solid black;height:80px;}
.box2{background:silver;float:left;padding:5px;border:1px solid black;width:170px;height:400px;margin:5px;}
.box3{background:darkgray;padding:5px;margin:5px 5px 0 195px;border:1px solid black;}
-->
</style>
</head>
<body>
<div class="box1"><p style="text-align:center"><code><b><div class="box1"></div></b></code></p></div>
<div class="box2"><p style="text-align:center"><code><b><div class="box2"><br /></div></b></code></p></div>
<div class="box3">
<p style="text-align:center"><code><b><div class="box3"></div></b></code></p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</body>
</html>
-
Hi,
Ich will allerdings, dass die linke Menü-Spalte (.box2) nicht height:400px hat, sondern so lang wie die angezeigte Seite ist (100%). Wenn ich aber height:100% eingebe, ist die Seite länger als der Bildschirm. Ich bin schon ganz verzweifelt, kann mir bitte jemand einen Tipp geben. Danke schön!
.box2{background:silver;float:left;padding:5px;border:1px solid black;width:170px;height:400px;margin:5px;}
Wenn Du hier 400px durch 100% ersetzt, ergibt sich für die erzeugte Box eine Höhe von
5px margin-top + 1px border-top + 5px padding-top + 100% der Fenster-Innenhöhe + 5px padding-bottom + 1px border-bottom + 5px margin-bottom,
zusammengefaßt 100% der Fenster-Innenhöhe + 22px.Und das ist selbstverständlich höher als 100% der Fenster-Innenhöhe.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Ich will allerdings, dass die linke Menü-Spalte (.box2) nicht height:400px hat, sondern so lang wie die angezeigte Seite ist (100%). Wenn ich aber height:100% eingebe, ist die Seite länger als der Bildschirm.
Wahrscheinlich gibt es dafür etliche Lösungen. Ein Ansatz :
Ermittel die zur Verfügung stehende Höhe mit screen.availHeight, zieh die Höhe deines oberen horizontalen divs ab und nimm den Wert als höhe für box2.
cu mipu
-
Ermittel die zur Verfügung stehende Höhe mit screen.availHeight, zieh die Höhe deines oberen horizontalen divs ab und nimm den Wert als höhe für box2.
Und gäbe es auch eine Möglichkeit ohen Java?
-
Hi,
Ermittel die zur Verfügung stehende Höhe mit screen.availHeight, zieh die Höhe deines oberen horizontalen divs ab und nimm den Wert als höhe für box2.
Und gäbe es auch eine Möglichkeit ohen Java?mipu hat eine java-freie Möglichkeit genannt.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
Hi,
das erste Problem ist, daß CSS-Elemente keine "Spalten" wie Tabellenzellen sind und sich auxch nicht an benachbarten Elementen orientieren.
Das zweite Problem ist, daß 100% durchaus relativ ist. Meinst Du die Bildschirmhöhe? Hier bekommst Du das Problem, daß Du feste Werte nicht mit Prozentangaben mixen kannst, d.h. der Header sollte auch eine prozentuale Höhe bekommen. Allerdings was ist, wenn der Inhalt nicht in die Fensterhöhe passt? Korrekte Browser vergrößern die Box dann nicht.
Daher würde ich es entweder so belassen oder halt doch wieder auf eine Layout-Tabelle zurückgreifen, die die hierzu benötigten Eigenschaften nunmal besitzt.freundliche Grüße
Ingo