Toon posts:

[CSS] DIV positonering en scroll

Pagina: 1
Acties:

Verwijderd

Topicstarter
Hoi.

Ik heb het volgende probleem:
Een div met een class die een div op een positie zet en de overflow op auto heeft staan als volgt

code:
1
2
3
4
5
6
7
8
9
10
11
<style>
.container{
    position:absolute;
    overflow:auto;
    top:50px;
    left:50px;
    right:50px;
    bottom:50px;
    border:1px solid #CC3322
}
</style>


De div krijgt als class "container" en staat vol tekst of whatever.

In Firefox krijg ik precies wat ik verwacht, een absolute box die scrollbaar wordt als dat nodig is. In IE is het allemaal natuurlijk weer anders, de div staat wel op de juiste positie, de left, top en right waarden kloppen maar de hoogte past zich aan de content aan en de scrollbar hecht zich aan de browser ipv aan de div.

Ook het volgende foefje werkt niet:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen
{
* html
{
    overflow-y: hidden;
}
* html body
{
    overflow-y: auto;
    height: 100%
}
* html div
{
        overflow:auto;
}


De scrollbar is dan wel weg van de browser maar de div heeft er ook geen....

de div is gewoon
code:
1
2
3
<div class="container">
      [ een hoop tekst]
</div>

help!

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

mjah IE heeft er, so it seems, moeite mee dat de "height" voor de container niet expliciet gespecificeerd is (dat samenhangend met het feit dat je top, left, bottom, right positionering, zoals je zelf al zei, ook niet werkt in IE). Je zou de hoogte voor IE mbv javascript kunnen berekenen, maar das ook maar ranzig imho.
Ik brainstorm nog ff, maar kan vooralsnog geen oplossing voor dit probleem verzinnen.

EDIT:

Zonder gebruik van Javascript, maar mét het verkeerde box-model én IE in quirksmode: :X :X
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- IE in quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        body, html {width: 100%; height: 100%; margin: 0;}
        
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div style="width: 100%; height: 100%; background: red; padding: 50px;">
        <div style="width: 100%; height: 100%; background: white;overflow:auto;overflow-y: scroll;">
            <!-- Hier dus veeeeeel tekst -->
        </div>
    </div>
</body>
</html>

Het kan dus wel, maar of je daar vrolijk van wordt :)

[ Voor 87% gewijzigd door Sappie op 27-04-2005 16:37 ]

Specs | Audioscrobbler


Verwijderd

Topicstarter
Oeh, ja, wel een originele oplossing maar niet echt bruikbaar in mijn toepassing ... zou nug kunnen met verschillende padding waarden voor left right top en bottom maar dan nog voorzie ik ellende.

Het vage is dat de positioning waarden in principe wel werken, maar als dr een top gedefinierd is dan neemt ie geen bottom meer mee of iets in die geest! een div rechtsonder laten plakken kan allemaal zonder problemen ....

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Volgens mij is het een algemeen bekend probleem dat dit niet werkt in IE en is er geen mooie oplossing voor. Ik ben bang dat je dus toch bent aangewezen op een klein beetje javascript.

Specs | Audioscrobbler


Verwijderd

Topicstarter
Hmmm ja, toch bizar trouwens ... snel achter elkaar verversen in ie (CTRL-refresh) heeft *soms* tot gevolg dat er een box gerenderd wordt die er uit ziet alsof het klopt .... erg vies allemaal!

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

tja IE hè... Waarom IE r0x! :9 :X

[ Voor 4% gewijzigd door Sappie op 27-04-2005 17:07 ]

Specs | Audioscrobbler

Pagina: 1