[CSS] DIV met fixed width, dyn height, fixed margins

[gwillem]

Hoe bereikt men het volgende? Een tekstvak (DIV) met een vaste breedte en variabele hoogte, gepositioneerd op 10px van de top, left en bottom van het scherm. Met scherm bedoel ik het zichtbare gedeelte van de browser. Als je de browser resized moet de DIV dus krimpen/groeien in de hoogte zodat deze altijd 10px van de rand afzit (boven/onder/links).

In FF werkt het volgende een beetje:

DIV {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
overflow: auto;
}

Alleen kan ik nu geen vaste breedte instellen met "width" (wordt genegeerd). Bovendien werkt het niet in IE (die negeert "bottom"). Iemand een oplossing?

Dit lijkt me een redelijke standaard vraag maar ik kon geen vergelijkbare postings vinden.
Dank u!

[Verwijderd]

Bij mijn weten alleen met fixed positioning mogelijk;

Cascading Stylesheet:

html, body {
 padding: 0;
 margin: 0
}

div {
 border: 1px solid #f00;
 position: fixed;
 left: 10px;
 top: 10px;
 right: 10px;
 bottom: 10px
}

[gwillem]

Dank, dat werkt in Firefox, maar helaas niet in IE. Als de content van de DIV te groot is, wordt de DIV opgerekt door IE in plaats van auto overflow. De DIV heeft dan wel een bottom marge van 10, maar die is ten opzichte van het virtuele scherm en niet van het zichtbare scherm.

[ Voor 23% gewijzigd door gwillem op 13-11-2005 00:28 ]

[Verwijderd]

Waarom niet gewoon

Cascading Stylesheet:

html, body {
  margin: 0;
  padding: 0;
  background: url(foo); /* voor pos: fixed in IE */
}

div {
  position: fixed;
  _position: absolute; /* voor pos: fixed in IE */
  _top: expression(eval(document.body.scrollTop)); /* voor pos: fixed in IE */
  margin: 10px;
}

IE moet dan wel in quirksmode staan.

[ Voor 9% gewijzigd door Verwijderd op 13-11-2005 11:21 ]

[Verwijderd]

gwillem schreef op zaterdag 12 november 2005 @ 22:44:

Volgens mij moet je een heel eind komen als je
html en body beide op 100% hoogte zet?