[HTML] Table height > aan onderkant van browser uitlijnen - Softwareontwikkeling

donderdag 23 oktober 2003 12:32

Acties:

$ondertitel

Topicstarter

Ik heb reeds gezocht in de search, en ik vond wel enige topics maar niet een goede oplossing.

Ik ben bezig met een website waarbij aan de onderkant van het design een knoppenbalk zit die automatisch mee moet scalen.

Nu heb ik geprobeerd de onderste table van de knoppen balk 100% height mee te geven. Maar dan wordt hij zo groot als het browser scherm zonder er rekening mee te houden dat er al een table boven staat.

Voorbeeld: http://www.interexperts.nl/lebrethof/home.php

Ik heb de border van de onderste table op 1 gezet. Zoals je ziet loopt de tabel veel te ver naar onderen door.

Hoe kan ik ervoor zorgen dat de knoppenbalk onderaan uitlijnt? Ik kan dus geen vast height opgeven omdat het juist de bedoeling is dat de knoppenbalk meescaled.

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

donderdag 23 oktober 2003 12:40

Acties:

Verwijderd

Je kunt het wel met een Height oplossen, maar dan werkt het alleen in IE! De Height property bestaat namelijk niet officieel voor tabellen. Maar goed, doe je het voor IE, dan is de oplossing als volgt:

Je begint je pagina altijd met een tabel waarin je de Height op 100% zet. De binnenliggende tabellen moet je dan gezamenlijk ook 100% maken. Bijv:

HTML:

<body>
  <table height="100%">
    <tr>
      <td>
        <table>
          <tr><td>BLAAT</td></tr>
        </table> 
        <table height="100%" valign="bottom">
          <tr><td>Onderkant vd pagina</td></tr>
        </table>
      </td>
    </tr>
  </table>
</body>

Dit moet werken...

[ Voor 17% gewijzigd door Verwijderd op 23-10-2003 12:41 ]

donderdag 23 oktober 2003 12:44

Acties:

me1299

$ondertitel

Topicstarter

Verwijderd schreef op 23 oktober 2003 @ 12:40:
Je kunt het wel met een Height oplossen, maar dan werkt het alleen in IE! De Height property bestaat namelijk niet officieel voor tabellen. Maar goed, doe je het voor IE, dan is de oplossing als volgt:

Je begint je pagina altijd met een tabel waarin je de Height op 100% zet. De binnenliggende tabellen moet je dan gezamenlijk ook 100% maken. Bijv:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <table height="100%">
    <tr>
      <td>
        <table>
          <tr><td>BLAAT</td></tr>
        </table> 
        <table height="100%" valign="bottom">
          <tr><td>Onderkant vd pagina</td></tr>
        </table>
      </td>
    </tr>
  </table>
</body>
Dit moet werken...

Dat werkt al niet

Het probleem is dat als je twee tabellen 100% geeft hij opnieuw de volledige hoogte pakt.

Is er misschien niet iets met css mogelijk?

PS: Ik zit nu flink in de source te wroeten dus het voorbeeld kan niet goed meer kloppen.

[ Voor 16% gewijzigd door me1299 op 23-10-2003 12:59 ]

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

donderdag 23 oktober 2003 12:59

Acties:

Verwijderd

wat goed werkt is via document.body.scrollHeight;
de hoogte van de inhoud van de pagina op te vragen
en dan of de tabel in een div te zetten met atribuut 100% en de div te positioneren

of de knoppenbalk in een gepositioneerde div te zetten.

donderdag 23 oktober 2003 13:55

Acties:

Clay

cookie erbij?

het kan met css. In IE kan je gewoon height op 100% doen en iets met absolute onderin zetten. Als je de content dan aan de onderkant een margin of padding geeft valt het niet over elkaar heen. In moz/fb enzo is 100% de hoogte van het parent element, maximaal de beeldschermhoogte dus.
Daarvoor kan je dan min-height gebruiken, zodat de hoogte altijd 100% is, en mocht er meer content zijn dan rekt het uit. Daarvoor meot je wel ff een css selector in je stylesheet zetten om die 100% er weer uit te mollen en dat snapt IE toch niet, ala:

HTML:

<style type="text/css">
html,body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

#container {
    position:relative;
    margin:auto;
    width:700px;
    height:100%;
    background:#f0f0f0; 
}

#foot {
    position:absolute;
    bottom:0px;
    height:20px;
    width:700px;
    background:silver;
}

body>div#container {    
    height:auto;
    min-height:100%;
}

.content {
    padding:10px;
    padding-bottom:30px;
}
</style>

...

<div id="container">
    
    <div class="content">
        blah
    </div>
    
    <div id="foot">
    
    </div>
</div>

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 23 oktober 2003 13:57

Acties:

Verwijderd

Kijk hier eens naar: http://www.endotwinn.com/...ocid=1089&ad=1&menuid=151
Hier werkt het wel...