Autor Zpráva
Pavlínka
Profil *
vytvářím na webu okno s diskuzí...
hlavičku mám vysokou 56px;

a chtěla bych div který bude mít 100% výšku mínus 80px na další div s možností zapisování.

tz.:

<!-- zde bude hlavicka -->

<div id="text"> text uživatele s -moz-scrollbars-vertical;</div>
<div id="pridejtext">textove pole s 80px vyskou které stále bude vidět i bez rolování :)</div>

<!-- paticka viditelna po srolovani nize -->


moc se mi nevede :)
děkuji za rady
DarkMeni
Profil
Přes tabulku by to šlo udělat jednoduše. Jestli to chceš přes div tak mě napadá asi jedině přes absolutní pozicování
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
          html, body { height: 100%; padding: 0px; margin: 0px; }
        .obal
        {
            height: 100%;
            position: relative;
        }
        .hlavicka
        {
            height: 56px;
            background: Orange;
        }
        .text
        {
            background: SteelBlue;
            position: absolute;
            top: 56px;
            bottom: 80px;
            overflow: auto;
            width: 100%;
        }
        .odsazeni { padding: 10px; }
        .pridej-text
        {
            height: 80px;
            width: 100%;
            background: LightBlue;
            position: absolute;
            bottom: 0px;
        }
        .paticka { background: Orange; }
    </style>
</head>
<body>
    <div class="obal">
        <div class="hlavicka"></div>
        <div class="text">
            <div class="odsazeni">
            Text
            </div>
        </div>
        <div class="pridej-text">
            <div class="odsazeni">
            Přidej text
            </div>
        </div>
    </div>
    <div class="paticka">
        <div class="odsazeni">
        Patička
        </div>
    </div>
</body>
</html>
Pavlínka
Profil *
nedá mi to se nezeptat...
jak to lze udělat přes tabulku?
DarkMeni
Profil
Třeba takle
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body { height: 100%; margin: 0px; }
            .main
            {
                width: 100%;
                height: 100%;
                border-collapse: collapse;
            }
            .hlavicka { height: 56px; background: LightGreen; }
            .text { overflow: auto; background: SteelBlue; }
            .napsat-koment { height: 80px; background: LightBlue; }
            .paticka { padding: 20px; background: #432356; }
        </style>
    </head>
    <body>
        <table class="main">
            <tr><td class="hlavicka">
            <tr><td class="text">
            <tr><td class="napsat-koment">
        </table>
        <div class="paticka">(c) 2015 ...</div>
    </body>
</html>
Ale zase sem někde četl že neni dobrý používat tabulku jako základ layoutu
Tady je to vysvětlený: Tabulkový layout nezrychlíte
Jo a pořád si nejsem jistej jestli sem dobře pochopil co se snažíš udělat, možná by bylo lepší kdybys to třeba nakreslila..
Tomáš123
Profil
DarkMeni:
Namiesto značiek tabuľky existujú tabuľkové hodnoty displayu.
DarkMeni
Profil
Tomáš123:
Jo no ale to se pak chová stejně ne? (jakože se to zobrazí až po tom co se načte celej obsah)

Pavlínka:
Asi už vim o co ti jde, jestli chceš aby stránka šla normálně rolovat ale pole pro přidání textu se rolovalo s ní a když se dojede k patičce tak aby zůstalo před ní a nepřekrylo jí - tak to přes css jen tak neuděláš. Můžeš ale použít javascript a po události onscroll zjistit jestli už dosáhnul patičky a když jo, tak position: fixed přepnout na position: absolute nebo ho prostě vypnout
Tomáš123
Profil
DarkMeni:
ale to se pak chová stejně ne?
Môžeš skúsiť. V IE8 mi zobrazí text skôr aj keď použijem obyčajnú tabuľku. Starší ani novší nemám. Firefox 42.0 načítanie obrázkov vzdáva, zobrazí namiesto nich ikonku slepého odkazu. Iný prehliadač momentálne nemám po ruke. Kto chce, testujte.

Pre mobilné pripojenia: Použité obrázky majú obrovské rozmery a dátový objem zhruba 10kB.
Pavlínka
Profil
nene jde mi o to, že s hlavičkou a patičkou nechci moc hýbat (je o již hotový web a nerada bych změnou narušila zobrazení na jiných stránkách)
a do pole kde mám běžně text chci div-vík který se bude roztahovat dle velikosti textu...

viz ctrlv.cz/shots/2015/11/21/zTFy.png
v malování jsem nikdy nebyla dobrá :D

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: