[CSS] Scrollbar doet moeilijk - Softwareontwikkeling

maandag 28 april 2003 21:31

Acties:

Topicstarter

Ik ben bezig met een website waarbij ik wil dat de content scrollable moet zijn indien nodig. Ik wil geen frames gebruiken en zit daarom met CSS te klooien

Layout ziet er zo uit :

bovenin een table (100% breed) met een logo erin
daaronder een table met 2 kolommen, links een kolom met menu opties (100% hoog), en rechts een kolom voor de content (100% breed en hoog).
In beide kolommen gebruik ik weer een nieuwe table.

Nu heb ik in de content td het volgende :

code:

<table width=100% height=100% cellspacing=0 cellpadding=0 border=1>
  <tr><td>
    <div style="position:relative; top:0px; left:0px; width:100%; height:100%;overflow-y:scroll;">
      Boel veel content met veel <br>'s erin zodat er een scrollbar verchijnt
    </div>
  </td></tr>
</table>

Punt is dat als ik zowel de table als de div height op 100% zet, de scrollbar doorloopt tot in het 'oneindige', m.a.w. ik zie de onderste knop niet. Als ik de height van de table of de div reduceer gaat het wel goed, maar ik wil juist dat de scrollbar gewoon netjes doorloopt tot de rand van de browser (zoals met een normale frame).

Dit moet toch kunnen ? Wat doe ik fout ?

maandag 28 april 2003 23:00

Acties:

crisp

Devver

Pixelated

misschien een compleet voorbeeldje?

Intentionally left blank

maandag 28 april 2003 23:06

Acties:

Stewie!

Keen must die!

Zet height eens op 90%

Strava: https://www.strava.com/athletes/149347154

maandag 28 april 2003 23:14

Acties:

EnsconcE

wat d8 je van

code:

1	overflow:auto;

ipv overflow-y:scroll;
en doe dit ook ff

code:

1
2
3

<style type="text/css">
body { margin: 0px 0px 0px 0px; }
</style>

maandag 28 april 2003 23:21

Acties:

Verwijderd

Poging:

HTML:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
overflow:hidden;
} 
#dit{
display:block;position:absolute;bottom:0px;top:20px;
overflow:-moz-scrollbars-vertical;//overflow-y:scroll;
height:expression(document.body.clientHeight-20);
width:100%;
}
</style>
</head>
<body>
<table><tr><td>test</td></tr></table>
<div id="dit">
  sdffsd
      Boel veel content met veel <br>'s erin zodat er een scrollbar verchijnt
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>
</html>

Dit zou moeten werken. Ik weet niet of het in IE5 werkt.
Nadeel hiervan is dat ik min of meer gedwongen ben geweest om expressions te gebruiken. Het beste is om een manier te vinden die dat niet doet. Ik zou alleen niet weten hoe.