Maak een div die de hoogte van de resterende schermruimte vult

Ik werk aan een webapplicatie waar ik wil dat de inhoud de hoogte van het hele scherm vult.

De pagina heeft een header, die een logo bevat, en account informatie. Dit kan een willekeurige hoogte zijn. Ik wil dat de inhoud de rest van de pagina vult tot aan de onderkant.

Ik heb een header div en een content div. Op dit moment gebruik ik een tabel voor de layout, zoals dit:

CSS en HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

De volledige hoogte van de pagina wordt gevuld, en scrollen is niet nodig.

Voor alles binnen de inhoud div, zal het instellen van top: 0; het recht onder de header zetten. Soms zal de inhoud een echte tabel zijn, met de hoogte ingesteld op 100%. Als je header in content zet, zal dit niet werken.

Is er een manier om hetzelfde effect te bereiken zonder de table te gebruiken?

Update:

Elementen binnen de inhoud van de div krijgen ook een hoogte ingesteld op percentages. Dus iets van 100% binnen de div zal deze tot de bodem vullen. Net als twee elementen van 50%.

Update 2:

Als de header bijvoorbeeld 20% van de schermhoogte inneemt, zou een tabel met 50% in #content 40% van de schermruimte innemen. Tot nu toe is het verpakken van het geheel in een tabel het enige dat werkt.

danronmoon
Bewerkte vraag 8ste4 februari 2019 в 5:39
Programmering
html css html-table
18de3 september 2008 в 5:06
4 views

Er is echt geen degelijke, cross-browser manier om dit in CSS te doen. Ervan uitgaande dat je lay-out ingewikkeld is, moet je JavaScript gebruiken om de hoogte van het element in te stellen's. De essentie van wat je moet doen is:

Element Height = Viewport height - element.offset.top - desired bottom margin

Zodra je deze waarde kunt krijgen en de hoogte van het element kunt instellen, moet je event handlers aan zowel het venster onload als onresize koppelen, zodat je je resize functie kunt afvuren.

Ook, ervan uitgaande dat je inhoud groter kan zijn dan de viewport, moet je overflow-y instellen op scroll.

Igor
Bewerkt antwoord 3de1 september 2013 в 5:52
Commentaren (13)
 



Test

body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}





    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

In alle verstandige browsers kun je de "header" div voor de inhoud plaatsen, als een sibling, en dezelfde CSS zal werken. IE7- interpreteert de hoogte echter niet correct als de float 100% is in dat geval, dus de header moet IN de inhoud staan, zoals hierboven. De overflow: auto zal dubbele schuifbalken veroorzaken in IE (waar de viewport schuifbalk altijd zichtbaar is, maar uitgeschakeld), maar zonder deze zal de inhoud clippen als deze overflowt.

Commentaren (2)

Als het enige probleem de hoogte is, lijkt het gebruik van divs te werken:

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

In een eenvoudige test is de breedte van header/content verschillend in uw voorbeeld en het mijne, maar ik'ben niet zeker uit uw post of u'bezorgd bent over de breedte?

Commentaren (4)