Marcel Stör: 100% Höhe, fixe Bereiche und IE box model

Beitrag lesen

Hallo Detlef

OK, du positionierst #box absolut und zwar mit top, right _und_ bottom, left, jeweils 20px. Damit erreichst du den weißen Rand.
Weil der IE das nicht kann, wird für body ein Innenabstand von 20px gesetzt. Unter Ausnutzung des kaputten Boxmodels des IE im Quirksmodus (ausgelöst durch <?xml version="1.0"?> in der ersten Zeile) kann dann 100% Höhe verwendet werden, statt der absoluten Positionierung:

  • html #box {

position: static;
  height: 100%;
}


> Damit werden aber die 20px bei absoluten Positionierungen nicht mehr berücksichtigt.  
  
Klar, das habe ich verstanden - aber in der Hitze des Gefechts vergessen/übersehen.  
  

> Entweder du berücksichtigst disese Differenz bei der Positionierung von ~~~css

#navigation, also:  

> * html #navigation {  
>   top: 152px;  
> }  
> 

oder du verwendest für #box nicht static sondern relative:

  • html #box {

position: relative;
  height: 100%;
}


>   
> Inwieweit das jetzt im IE wirklich funktioniert, kann ich im Moment nicht testen.  
  
Mit dem ersten Vorschlag kommt der pseudo-browser gut zurecht, der zweite passt ihm gar nicht. So, mittlerweile wird das navi DIV richtig positioniert. Der pseudo-browser versteht aber immer noch nicht, was ich meine, wenn ich ihm mitteile, er soll dieses navi DIV so gross wie möglich machen. Schreibe ich height: 100%; füllt er es bis zum untersten Rand (des viewports) auf, ansonsten räumt er ihm gerade soviel Platz ein, wie der Inhalt der navi benötigt. Was habe ich hier noch nicht verstanden? Es leuchtet mir nicht ein, warum ich content und navigation abgesehen von den linken/rechten Rändern gleich definieren kann.  
Natürlich habe ich auch was den Inhalt der einzelnen DIVs angeht noch Nachholbedarf, denn dort stehen noch Blindtabellen. Deren Eliminierung scheint mir allerdings dann ein Kinderspiel (öööhhhm, schluck, Mund zu voll genommen?), sobald das Grundgerüst einmal steht.