Div height=100% hat nicht die volle Höhe

Icy

Icy

*
ID: 187087
L
28 April 2006
385
52
Hallo,
ich habe folgenden Quelltext:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
	body { padding:0px; margin:0px; height:100%; }
	.Oben { display:block; background-color:#FFFF00; }
	.Navi { display:block; background-color:#FFDD00; }
	.Rechts { display:block; height:100%; width:150px; float:right; background-color:#DDDDDD; }
</style>
</head>
<body>
	<div class="Oben">A<br>A<br>A</div>
	<div class="Navi">B</div>
	<div class="Rechts">Rechts<br>mmm<br>1<br>2<br>3<br>4</div>
	Hier der Content <?php echo str_repeat("Text ", 250); ?>blah
</body>
</html>

damit möchte ich erreichen, das das graue Ding, das "Rechts" heißt, bis ganz nach unten geht. Gewünschtes Layout:
layoutj.png


Aber irgendwie ignoriert er einfach height:100% - sowohl im Internet Explorer als auch in Firefox.

Was mache ich falsch bzw. wie macht man es richtig?
 
Also habs mir nicht angeguckt wie es aussieht, aber nur zur info:

100% heght= Fenstergröße, also quasi deine Bildschrim abzgl. der Browserleisten.

100% bedeutet nicht dokumentenlänge.
 
Es sieht zur Zeit so aus, das das "Rechts"-Element nur bis zur "4" geht:
layout2.png


Welche Möglichkeiten gibt es, die graue Spalte bis zum Ende durchgezogen zu bekommen?
 
Super, html {height:100%;} bringt mich schon etwas weiter, ;)
aber:
jetzt füllt das Div nicht nur den restlichen Platz aus, sondern hat wirklich 100% Größe des Browserinnenbereiches, so das ich immer ein Scrollbalken habe :( Wenn ich das "Rechts"-Element vor alle anderen Elemente lege, dann funktioniert es tadellos, aber dann habe ich folgendes Layout:
layout3.png


Noch Vorschläge?
 
Der Scrollbalken den Du da siehst, ist im Normalfall nicht da.
Er ist nur da wenn deine Container einen Outline rahmen von 1px und mehr haben.
Sprich dann ist der Container nicht mehr nur 100% sondern (100% + je RahmenPX)

Vielleicht solltest Du mal innerhalb des grauen containers mit der höhe rumspielen..

Code: 
Rechts { min-height: 99%; }
 
Nein, das ist leider auch nicht die Lösung :(

Ich habe momentan folgenden Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
	html, body { padding:0px; margin:0px; height:100%; }
	.Oben { display:block; background-color:#FFFF00; }
	.Navi { display:block; background-color:#FFDD00; }
	.Rechts {
display:block;
width:150px;
float:right;
margin-bottom:0px;
background-color:#DDDDDD;
min-height:80%;
	}
</style>
</head>
<body height="100%">
<div class="Oben">A<br>A<br>A</div>
<div class="Navi">B</div>
<div class="Rechts">Rechts<br>mmm<br>1<br>2<br>3<br>4</div>
mmm <?php echo str_repeat("Texu ", 250); ?>
</body>
</html>
Bei 80% geht der Scrollbalken weg, wenn das Fenster mindestens eine bestimmte Größe hat. Die Height/Minheight-Angabe bezieht sich nicht auf die verbleibende Resthöhe wie ich es mir wünsche, sondern auf die absolute Höhe des Browserinnenfensters.

Also bisjetzt ist das Problem noch nicht vollständig gelöst
 
Mit Rein DIvs und CSS ist es halt nicht ganz so einfach.. Musst immer wieder mit den Prozenten der rechten Box rum spielen....

Wenn Du also von meinem gleich geposteten beispiel den header oder navi in der höhe anpasst, so veränder auch die Prozentuallen angaben der Rechten box....

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Testdatei</title>
  <style type="text/css">
    html {
      height: 100%;
    }
    body {
      margin: 0;
      height: 100%;
    }
    #wrapper { height: 100%; border: 0px solid red; }
    .Oben {
      height: 10%;
      background-color:#FFFF00;
    }
    .Navi {
      height: 2.5%;                       
      background-color:#FFDD00;
    }
    .Links {
      float: left;
      background: white;
    }
    .Rechts {
      float: right;
      min-height: 87.5%;
      width: 150px;
      background-color:#DDDDDD;
    }
  </style>
</head>

<body>

<div id="wrapper">
  <div class="Oben">Header....</div>
  <div class="Navi">Navigation</div>
  <div class="Links">Der Content wäre dann wohl hier ... </div>
  <div class="Rechts">Rechts<br />Textumirus</div>
  <div style="clear:both"></div>
</div>
</body>
</html>
 
jetzt sind die Scrollbalken glücklicherweise weg und das Layout im Groben so wie es sein soll,
ABER:
weil du das jetzt in Prozente ausgedrückt hast, Oben=10%, Navi=2,5%, Rechts=87,5% -> 10%+2,5%+87,5% = 100%, verändert sich jetzt auch die Größe des Headers und der Navi, wenn man den Browser größer oder kleiner zieht :(
 
Dann gibst Du halt die höhe des Headers und der Navigation in px an und veränderst den Prozentuallen wert der rechten box.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Testdatei</title>
  <style type="text/css">
    html {
      height: 100%;
    }
    body {
      margin: 0;
      height: 100%;
    }
    #wrapper { height: 100%; border: 0px solid red; }
    .Oben {
      height: 120px;
      background-color:#FFFF00;
    }
    .Navi {
      height: 25px;                       
      background-color:#FFDD00;
    }
    .Links {
      float: left;
      background: white;
    }
    .Rechts {
      float: right;
      min-height: 82.7%;
      width: 150px;
      background-color:#DDDDDD;
    }
  </style>
</head>

<body>

<div id="wrapper">
  <div class="Oben">Header....</div>
  <div class="Navi">Navigation</div>
  <div class="Links">Der Content wäre dann wohl hier ... </div>
  <div class="Rechts">Rechts<br />Textumirus</div>
  <div style="clear:both"></div>
</div>
</body>
</html>

Beachte jedoch das 100% = auch irgendwie verbunden mit der auflösung sind.
Daher wird auch beim verkleinern des Browserfensters bei gleichbleibender auflösung ein Scrollbalken angeszeigt.
Wie kann man das weg machen?
Keine ahnung ^^

Edit: vielleicht mit CSS v3, aber das unterstützt kaum ein Browser ^^, mit css3 könnte man bestimmte werte mit calc() berechnen.
 
  • Like
Reaktionen: Icy
Nach deinem Code haben wir nun folgende Werte:

Oben = 120px
Navi = 25px
Rechts = CSS-Wert

Innenhöhe = Höhe (Höhe des Browserinnenbereichs)


und können uns entscheiden zwischen
DivsGesamthöhe = 120px + 25px + CSS-Wert(%)xHöhe:100
oder
DivsGesamthöhe = 120px + 25px + CSS-Wert(Zahl)

Egal ob ich für "Rechts" ein Prozentwert oder Zahlenwert eintrage, es wird mathematisch nie immer "DivsGesamthöhe = Innenhöhe" sein, was heißen würde, das wir mit diesem Modell in der Sackgasse wären. :(


Da muss wohl ein ganz anderer CSS-Ansatz her (welcher?) oder ich muss es traditionell per Table lösen. Schade.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben