Scrollende div met variabele hoogte - Softwareontwikkeling

donderdag 9 maart 2006 13:39

Acties:

Topicstarter

Hallo,

Ik wil het volgende ontwerp maken met het totaal 100% hoogte:

header: vaste hoogte
content: variabele hoogte, overflow geeft scrollbar
footer: vaste hoogte

Eerst heb ik het geprobeerd met 3 div's onder elkaar maar dat werd niets. Nu probeer ik het via een tabel. In principe werkt het nu in Internet Explorer maar het moet ook werken in Firefox. Het liefst wil ik niet met een iFrame werken.

De code tot nu toe:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>test</TITLE>
    </HEAD>
    <BODY style="height: 100%; margin: 0px; padding: 0px;">
        <table height="100%" border=1>
            <tr height="125px;">
                <td>test</td>
            </tr>
            <tr>
                <td>
                     <div style="height:100%;overflow-y:scroll;">
                            tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa
                            tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa
                            tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa
                            tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa
                            tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa tralalalaa 
                    </div>
                </td>
            </tr>
            <tr height="125px;">
                <td>test</td>
            </tr>
        </table>
    </BODY>
</html>

donderdag 9 maart 2006 13:43

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

'overflow-y' werkt gewoon vanaf FireFoy 1.0, zelfs zonder prefix:
http://annevankesteren.nl/2004/09/overflow

Ik denk eerder dat het probleem mogelijk ligt in de Tabel, die je volgens mij hier enkel voor visuele layout gebruikt en die juist voor zulke positioneringszaken desastreus kan werken,

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 9 maart 2006 13:50

Acties:

emkedouwe

Topicstarter

Ja maar die tabel heb ik juist geplaatst omdat je in firefox weer een probleem hebt met height: 100%;

donderdag 9 maart 2006 14:01

Acties:

Mysteryman

kan jij wat ik kan...

emkedouwe schreef op donderdag 09 maart 2006 @ 13:50:
Ja maar die tabel heb ik juist geplaatst omdat je in firefox weer een probleem hebt met height: 100%;

m.b.t. html en css heeft firefox geen problemen maar is IE irri!

en ontopic... ik denk inderdaad dat de tabel de beperking is... probeer het eens zonder de tabel en geef de divjes een position: relative; mee

Everybody happy??? I soon change that here we go...

donderdag 9 maart 2006 14:11

Acties:

emkedouwe

Topicstarter

Ja dan zou je zoiets krijgen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>test</TITLE>
    </HEAD>
    <BODY style="height: 100%; margin: 0px; padding: 0px;">
        <div style="position: relative; height: 125px; background-color: red;">test</div>
        <div style="position: relative; height: 100%;">test</div>
        <div style="position: relative; height: 125px; background-color: red;">test</div>
    </BODY>
</html>

Het vervelende is dan dat die middelste div 100% neemt van het totale scherm. Oftwel je krijgt een scrollbar en die onderste div komt daar onder te staan.

vrijdag 10 maart 2006 09:43

Acties:

emkedouwe

Topicstarter

Volgens mij is de enige cross browser oplossing toch met een iFrame:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>test</TITLE>
    </HEAD>
    <BODY style="height: 100%; margin: 0px; padding: 0px;">
        <table height="100%" border=1>
            <tr height="125px;">
                <td>test</td>
            </tr>
            <tr>
                <td>
                     <iframe src="http://www.google.com" height="100%"></iframe>
                </td>
            </tr>
            <tr height="125px;">
                <td>test</td>
            </tr>
        </table>
    </BODY>
</html>

Iemand nog betere ideeën ?

vrijdag 10 maart 2006 10:43

Acties:

orf

Zoiets?

http://www.home.zonnet.nl/kwillems/testsf.html

(via phpfreakz)