Div inferiore della finestra e adattabile in altezza div

C’è un modo per ottenere un div per essere sempre in fondo alla finestra, e un altro div, per cambiare la sua altezza per riempire ogni spazio che si lascia, e che div scorrerà se il suo contenuto è troppo lungo. (Non voglio che la finestra di scorrimento).

Questo è meglio illustrato da una foto:

div layout http://img401.imageshack.us/img401/3209/divs.png

Verde div sempre messo solo nella parte inferiore della finestra, e l’orange div colmare il divario. Quando la finestra è più piccola, come nella mano destra dell’immagine, arancione div sarà più piccolo e di scorrimento.

Verde div può essere attivata o disattivata. A volte il verde div avrà display: none, e poi l’arancione div si allunga verso il basso. Quando il verde div ha display: block di nuovo, l’immagine di nuovo.

Deve lavorare in IE6.

Finora posso ottenere il verde div andare a fondo:

position: absolute;
bottom: 0;

Ma non so come ottenere l’arancione div a fare quello che voglio.

OriginaleL’autore Rob | 2009-08-28

6 risposte

  1. 5

    si può dare un’occhiata a “Esplorare Piè di pagina” a List Apart,

    http://www.alistapart.com/articles/footers/

    speranza che aiuta,
    Sinan

    EDIT: (CSS puro modo)

    Il Codice Di Markup:

    <div class="non-footer">Your content goes here.</div>
    <div class="footer">Here is for footer content.</div>

    Tuo CSS:

    body, html, .non-footer {
        height: 100%;
        min-height: 100%;
        width: 100%;
    }
    .footer {
        height: 150px;
        margin-top: -150px;
        width: 100%;
    }

    Mi mancano alcuni dettagli, ma dovrebbe funzionare e dà l’idea di base dietro il trucco.

    Sinan.

    Grazie questo ha funzionato perfettamente. Ho usato il Javascript metodi per impostare l’altezza di orange div in modo dinamico. Stavo già usando JQuery per alternare gli elementi sulla pagina, quindi non era troppo difficile farla controllare anche l’altezza della finestra e outerHeight di vari elementi.
    Bello che è aiutato, c’è anche puro css trucchi per ottenere che, dando un margine negativo per il piè di pagina, se è ad altezza fissa. Io incolla è campione di markup per la risposta. tenere premuto su.

    OriginaleL’autore Sinan

  2. 6

    si dovrebbe usare il fisso invece di assoluta

    position: fixed;
    bottom: 0;
    Questo non funziona in IE6 senza JS o CSS espressioni.

    OriginaleL’autore stefita

  3. 2

    Prova di questo. Mettere questo in testa:

    <script>
        var int=self.setInterval(function(){clock()},100);
    
        function clock()
        {
            var s = document.getElementById("Footer");
            s.style.position = "Fixed";
            s.style.bottom = "0px";
            s.style.margin = "0px";
            s.style.height = "20px";
            s.style.width = "30px";
        }
    
        window.onload=clock
    </script>

    Html:

    <div id="Footer"></div>

    OriginaleL’autore deV

  4. 0

    provare questo:
    impostare l’arancione div posizione relativa
    con un margine inferiore = altezza del verde div
    con un overflow: auto

    Penso che il tuo orange div poi scorrere se diventa più grande quindi lo spazio tra il verde e il bianco div.
    per risolvere il tuo sfondo problema, è possibile impostare facilmente l’arancio come colore di sfondo.
    In questo modo, non sarà mai visibile per un utente che l’arancione div è in realtà più piccole come lo spazio tra il verde e il bianco div

    OriginaleL’autore Kennethvr

  5. 0

    Penso che ciò non è possibile senza la dimensione del centro div utilizzando Javascript.

    Posizionamento CSS fondamentalmente scorre dall’alto verso il basso, in modo da ottenere un div a bastone in fondo alla pagina che avete bisogno di prendere fuori dal flusso della pagina utilizzando position:absolute (o di posizione:fisso)

    Ma ora che il div è fuori dal flusso della pagina, quindi la metà div non sa fermarsi al top del fondo div. Sarà solo portare dietro la parte inferiore div e non mostra barre di scorrimento.

    OriginaleL’autore edeverett

  6. 0

    È possibile utilizzare la seguente soluzione per ottenere l’arancione div per fare quello che vuoi:

    if ( ( $('.container-with-footer').height() ) < ( $(window).height() ) ) {
        $('footer').css({
            "position":"absolute",
            "left":"0",
            "right":"0",
            "bottom":"0"
        })
    }
    Benvenuto e grazie per il tuo contributo! Si potrebbe desiderare di aggiungere una breve spiegazione di cosa fa questo codice e perché funziona.

    OriginaleL’autore Massimiliano Rossi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *