Vytvorte div, ktorý vyplní výšku zostávajúceho priestoru na obrazovke

Pracujem na webovej aplikácii, v ktorej chcem, aby obsah vyplnil výšku celej obrazovky.

Stránka má hlavičku, ktorá obsahuje logo a informácie o účte. Tá môže mať ľubovoľnú výšku. Chcem, aby div s obsahom vyplnil zvyšok stránky až po spodnú časť.

Mám header div a content div. Momentálne používam tabuľku na rozloženie takto:

CSS a 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>

Celá výška stránky je vyplnená a nie je potrebné žiadne posúvanie.

Pre čokoľvek vo vnútri divu s obsahom sa nastaví top: 0; ho umiestni priamo pod hlavičku. Niekedy bude obsahom skutočná tabuľka, ktorej výška bude nastavená na 100 %. Umiestnenie header dovnútra content neumožní, aby to fungovalo.

Existuje spôsob, ako dosiahnuť rovnaký efekt bez použitia table?

Aktualizácia:

Prvky vnútri obsahu div budú mať nastavené aj výšky na percentá. Takže niečo so 100 % vo vnútri div ho vyplní až po spodok. Rovnako ako dva prvky s hodnotou 50 %.

Aktualizácia 2:

Ak napríklad hlavička zaberá 20 % výšky obrazovky, tabuľka zadaná na 50 % vo vnútri #content zaberie 40 % priestoru obrazovky. Zatiaľ funguje iba zabalenie celej veci do tabuľky.

danronmoon
Edited question 8 február 2019 в 5:39
Programovanie
html css html-table
18 september 2008 в 5:06
18 zobrazenia

Naozaj neexistuje rozumný spôsob, ako to urobiť v CSS pre rôzne prehliadače. Za predpokladu, že vaše rozloženie je zložité, musíte na nastavenie výšky prvku použiť JavaScript. Podstatou toho, čo musíte urobiť, je:

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

Akonáhle dokážete získať túto hodnotu a nastaviť výšku prvku'musíte pripojiť obsluhy udalostí onload aj onresize okna, aby ste mohli spustiť svoju funkciu na zmenu veľkosti.

Taktiež za predpokladu, že váš obsah by mohol byť väčší ako viewport, budete musieť nastaviť overflow-y na posúvanie.

Igor
Edited answer 3 september 2013 в 5:52
Komentáre (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>

Vo všetkých rozumných prehliadačoch môžete umiestniť div "header" pred obsah ako súrodenca a bude fungovať rovnaké CSS. Avšak IE7- neinterpretuje výšku správne, ak je v tomto prípade float 100 %, takže hlavička musí byť V obsahu, ako je uvedené vyššie. Overflow: auto spôsobí dvojité rolovacie lišty v IE (ktorý má rolovaciu lištu zobrazenia vždy viditeľnú, ale vypnutú), ale bez nej sa obsah v prípade pretečenia orezáva.

Komentáre (2)

Ak je jediným problémom výška, zdá sa, že stačí použiť divy:

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

V jednoduchom teste sa šírka hlavičky/obsahu líši vo vašom príklade a v mojom, ale z vášho príspevku si nie som istý, či sa vás šírka týka?

Komentáre (4)