[HTML] cel met scrollbalk? - Softwareontwikkeling

dinsdag 5 juli 2005 14:05

Acties:

Topicstarter

Ik heb een pagina opgedeeld in 3 delen met 3 cellen. De hoogte van de bovenste cel (header) en de onderste cel (footer) is constant. De hoogte van de middelste cel moet variabel zijn zodat de hele pagina opgevuld is en de footer helemaal onderaan staat. Als er in de middelste cel meer komt te staan dan er in past moet de grootte van deze cel niet veranderen, inplaats daarvan moet er een scrollbalk komen.
De tabel waarin de 3 cellen staan is dus 100% hoog en 100% breed.

Als ik de middelste cel een constante hoogte geef, bijvoorbeeld 500, dan werkt het allemaal perfect.
Hieronder een voorbeeld ervan:
http://home.deds.nl/~robbbert/pagina.htm

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<body scroll="no">

<table border="2" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top" width="100%" height="50">
<b>header</b></td>
</tr>

<tr>
<td valign="top" width="100%" height="500">
<div style="overflow:auto; width:100%; height:100%;">
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</div></td>
</tr>

<tr>
<td valign="top" width="100%" height="50">
<b>footer</b></td>
</tr>
</table>

</body>

Bij body staat scroll="no" omdat er anders 2 scrollbalken zijn in IE.

Zo werkt het dus, maar ik wil de hoogte van de middelste cel zo hebben dat de footer helemaal onderaan de pagina komt te staan en de hoogte van de middelste cel afhankelijk is van de hoogte van het browservenster. Is er een manier om dat voor elkaar te krijgen? Ik wil geen frames of iframes gebruiken.

dinsdag 5 juli 2005 14:07

Acties:

Willem

divs met scrolling slash overflow.
ga daar eens wat over lezen.

Motor onderhoud bijhouden

dinsdag 5 juli 2005 14:37

Acties:

aex351

I am the one

willem169 schreef op dinsdag 05 juli 2005 @ 14:07:
divs met scrolling slash overflow.
ga daar eens wat over lezen.

Inderdaad, bekijk een deze thread [rml][ CSS en HTML] Borders rekken niet mee[/rml] . Daar vind je een voorbeeld van wat jij wilt (mijn post in het midden).

< dit stukje webruimte is te huur >

dinsdag 5 juli 2005 14:56

Acties:

Robbbert

Topicstarter

Wat nu het probleem is, is dat het bij mijn voorbeeld allemaal wel werkt, maar de hoogte van de middelste cel moet niet 500 maar relatief zijn. Maar als ik height="500" verander in height="100%" of weg laat, dan is de scrollbalk ineens verdwenen en wordt de tabel verder dan 100% uitgerekt. En dat wil ik niet.

dinsdag 5 juli 2005 15:00

Acties:

disjfa

be

De tabel is dan 100% van.... wat

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 5 juli 2005 15:04

Acties:

Robbbert

Topicstarter

disjfa schreef op dinsdag 05 juli 2005 @ 15:00:
De tabel is dan 100% van.... wat

De tabel moet evengroot als het venster van de browser zijn, dus 100% van de vensterhoogte.

dinsdag 5 juli 2005 15:18

Acties:

disjfa

be

Robbbert schreef op dinsdag 05 juli 2005 @ 15:04:
[...]
De tabel moet evengroot als het venster van de browser zijn, dus 100% van de vensterhoogte.

Dus jij denkt dat 100% de hoogte van de browser is. Je html denkt dat 100% de hoogte van de container is. De container met de html die 100% bij jouw krijgt heeft geen hoogte dus weet je browser niet wat 100% is.

Mischien moet je je html en je body ook op 100% zetten zodat je browser weet dat dat de hoogte is

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 5 juli 2005 15:44

Acties:

Robbbert

Topicstarter

Even een voorbeeld gemaakt zoals ik het wil hebben:
http://home.deds.nl/~robbbert/voorbeeld.htm
Alleen deze pagina is met frames gemaakt, ik wil het met een tabel met cellen.

de body of html op 100% zetten werkt ook niet. (of ik heb het verkeerd gedaan)

woensdag 6 juli 2005 12:31

Acties:

Robbbert

Topicstarter

Na flink wat geklooi is het me nu al bijna gelukt, op een klein dingetje na.

Ik heb nu met divjes gewerkt in plaats van tabellen en de body op 100% gezet. Het enige probleem is dat de middelste div 100% min 100px moet zijn, maar height:100%-100px; werkt natuurlijk niet. Weet iemand hoe ik 100% - 100px als hoogte kan instellen?