Come faccio a forzare la colonna per allungare sempre fino alla fine della pagina?

Ho bisogno che la colonna del mio contenuto si espanda nella parte inferiore della pagina quando il contenuto è più breve della finestra, ma si espande quando il contenuto è più lungo. La colonna deve scendere un po 'dalla parte superiore della pagina.Come faccio a forzare la colonna per allungare sempre fino alla fine della pagina?

Ecco il codice HTML per quello che ho descritto:

<html> 
    <body> 
    <div id="content"> 
     <p> asdf ghjkl </p> 
    </div> 
    </body> 
</html>

Ecco il CSS

#content { 
    min-height: 100%; 
    margin: 100px 0 0; 
}

Il problema con questo metodo è però che min-height: 100%; non tiene imbottitura in considerazione in modo che la pagina è sempre più grande di quello che voglio. ci

desiredbehavior

sia un modo per ottenere questo risultato senza usare Javascript:

Questo è il comportamento che sto cercando?

fonte

2011-09-17 enthdegree

Ho un esempio live su http://nerdhow.net/ (è la prima pagina) '# contentcolumn' corrisponde a' # wrapper' e '.region-content' a' # content' – enthdegree

Aggiungerò un immagine per illustrare meglio ciò che voglio. – enthdegree

Hai preso in considerazione l'utilizzo di min-altezza? Ti consentirà di impostare l'altezza minima del contenuto div, indipendentemente dal contenuto al suo interno. Si espanderà quindi per soddisfare le tue esigenze. – Paragon

Prova questo jsFiddle: http://jsfiddle.net/8R4yN/. Sembra che funzioni come vuoi tu. Ho preso alcuni suggerimenti da: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/. Sembra che lo overflow stia causando il nascondiglio, e anche il #content all'interno non sta aiutando :).

fonte

2011-09-17 01:48:29

posizionamento assoluto può fare questo per voi:

Prima rimuovere la min-height e margin quindi applicare questa regola al vostro CSS.

#content { 
    position: absolute; 
    top: 100px; 
    bottom: 0; 
}

fonte

2011-09-17 02:37:46

si può raggiungere mediante il posizionamento assoluto e l'aggiunta di blocco in più (se avete bisogno di un solido background sotto di te colonna).

Così, quando avrai un po 'di contenuti, si otterrà http://jsfiddle.net/kizu/7de7m/
E se avrete un sacco di contenuti, si otterrà http://jsfiddle.net/kizu/7de7m/3/

fonte

2011-09-17 11:11:24 kizu

in CSS3, è possibile utilizzare box-sizing

impostandolo su border-box, è possibile forzare il browser per rendere invece la scatola con la larghezza e l'altezza specificata, e aggiungere il confine e imbottitura all'interno della casella.

fonte

2011-09-17 11:31:16 user123444555621

Grazie! Non lo sapevo e mi ha aiutato a risolvere il problema. – enthdegree

Ok, ragazzi e uccelli, ecco cosa ho finito per fare. Invece di risolvere il problema direttamente, ho aggiunto alcune div fixer.

Prima di tutto, qui ci sono alcune osservazioni:

Sappiamo che quando #column è più lungo del viewport, la lunghezza del #column deve specificare l'altezza di <body>.
Se #column è più corto del viewport, l'altezza della finestra deve specificare l'altezza di <body>.
La colonna deve estendersi fino in fondo alla pagina in tutte le circostanze, indipendentemente dal tempo in cui è contenuto.

Per il primo criterio che dobbiamo fare in modo che height: auto sorge sul <body>. Height defaluts a questo se non è impostato. Dobbiamo inoltre assicurarci che #column disponga di height: auto; e overflow: hidden; in modo che si espanda alla dimensione del suo contenuto.

Per il secondo criterio è necessario impostare position: absolute; e min-height: 100%; su <body>. Ora la lunghezza di <body> si espande quando #column è più lunga di quella, ma non si accorcia più della finestra. La prossima parte è dove arriva la correzione.

Per il terzo criterio, il trucco è aggiungere alcune div aggiuntive e dare loro dei css speciali. Nel mio HTML ho aggiunto due div al di fuori di #column.

<div id="colhack-outer"> 
    <div id="colhack-inner"> 
    </div> 
</div> 
<div id="column"> 
    ... 
</div>

per il div esterno si postiion assolutamente e impostare è l'altezza al 100%, forzarlo ad utilizzare un modello di dialogo alternativo e spostare è area di contenuto utilizzando imbottitura. Si applica tutto lo stile della colonna (colore di sfondo, raggio del bordo, ombra, ecc.) Al div interno. Ecco l'CSS ho applicato a loro:

#colhack-outer { 
    height: 100%; 
    padding: <where you want to shift the column to>; 
    position: absolute; 
    width: 50%; 
} 
#colhack-inner { 
    height: 100%; 
    width: 100%; 
    background-color: #303030; 
}

Hai anche a rendere il vostro contenitore di contenuto effettivo utilizzare quel modello speciale scatola e spostarlo con imbottitura troppo:

#contentbox { 
    position: relative; 
    padding: <where you want to shift the column to>; 
    width: 50%; 
    color: #EEEEEC; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

esempio vivo qui: http://nerdhow.net/

posta un commento se avete domande o se qualcosa non era chiaro.

fonte

2011-09-18 03:24:48 enthdegree

Grazie ... impostando lo sfondo sul div interno ho risolto un problema che stavo avendo – Martin

Come faccio a forzare la colonna per allungare sempre fino alla fine della pagina?

risposta

Problemi correlati