mrx: Rest des divs auffüllen

SELF-Forum

Rest des divs auffüllen

mrx
– Informationen zu den Bewertungsregeln

Hallo

  
.fenster {  
	min-height:100px;  
	min-width:200px;  
	border:1px solid black;  
}  
.balken {  
    height:20px;  
    padding:5px 10px;  
}  
  
.close {  
    float:right;  
    width:40px;  
    height:30px;  
}  
  
.inhalt {  
    background-color:#FFFFFF;  
    height:100%;  
    padding:10px;  
}

  
<div class="fenster">  
<div class="close"><a href="#"><img src="image/close.png"></a></div>  
<div class="balken">Login</div>  
<div class="inhalt">hallo</div>  
</div>

Ich habe hier ein Fenster mit einem Balken oben, daneben (mit float:right) ein Schließen-Button.
Wie schaff ich es, dass das Inhalts-div den übrigen Platz vollständig einnimmt.

Thomas

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rest des divs auffüllen

    LX
    – Informationen zu den Bewertungsregeln

    Hallo, Thomas!

    Das geht nicht. Was man jedoch machen kann: ein div darum zu legen und mit einer geschickten Hintergrundgrafik simulieren, dass zwei getrennte Inhalte nebeneinander den vollen Platz füllen.

    In CSS2.1 kann man mit display:table(-row/-cell) das Verhalten einer Tabelle nachbilden, in CSS3 gibt es zudem die Möglichkeit zum Spalten-Layout. Beide sind leider im IE nicht verfügbar; ansonsten hilft leider nur JavaScript (per CSS expression oder als statisch eingebundenes Script).

    Gruß, LX

    --
    RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Rest des divs auffüllen

    Deus Figendi
    – Informationen zu den Bewertungsregeln

    Wie schaff ich es, dass das Inhalts-div den übrigen Platz vollständig einnimmt.

    Inwiefern tut er das denn nicht?
    Ich habe gerade mal deinen Code ausprobiert und ein bisschen eingefärbt:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Fenster</title>  
  <style type="text/css">  
.fenster {  
  min-height:100px;  
  min-width:200px;  
  border:1px solid black;  
}  
.balken {  
    height:20px;  
    padding:5px 10px;  
    background-color:#00F;  
    color:#FFF;  
}  
  
.close {  
    float:right;  
    width:40px;  
    height:30px;  
    background-color:#F00;  
}  
  
.inhalt {  
    background-color:#FFD;  
    height:100%;  
    padding:10px;  
}  
  
  </style>  
 </head>  
 <body>  
<div class="fenster">  
<div class="close"></div>  
<div class="balken">Login</div>  
<div class="inhalt">hallo</div>  
</div>  
 </body>  
</html>

    Und was da raus fällt nimmt an Inhalt (gelb) den übrigen Platz vollständig ein:
    Bildschirmfotot mit verschiedenen Browsern
    Ich vermute, dass ich dich falsch verstanden habe, aber was soll denn da aufgefüllt werden?

    --
    sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln