Come posso forzare un blocco DIV a estendersi fino alla fine di una pagina anche se non ha contenuto?

190

Nel markup mostrato di seguito, sto cercando di estendere il div del contenuto fino alla fine della pagina, ma si estende solo se ci sono contenuti da visualizzare. Il motivo per cui voglio farlo è che il bordo verticale appare ancora nella pagina anche se non ci sono contenuti da visualizzare.

Ecco il mio HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

E il mio CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

css html border

— Rasoio
fonte

Cosa vuoi che faccia se ci sono più contenuti che possono adattarsi alla pagina? Quali browser ti interessano?

— drs9222,

116

Il tuo problema non è che il div non sia al 100% di altezza, ma che il contenitore attorno non lo sia. Questo aiuterà nel browser che sospetto che tu stia utilizzando:

html,body { height:100%; }

Potrebbe essere necessario regolare anche il riempimento e i margini, ma questo ti consentirà di raggiungere il 90% del percorso. Se devi farlo funzionare con tutti i browser, dovrai fare un po 'di confusione.

Questo sito ha alcuni esempi eccellenti:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Consiglio anche di andare su http://quirksmode.org/

— Jason Hernandez
fonte

47

Questa soluzione non è amichevole per le pagine che scorrono.

— jbranchaud,

3

La proprietà min-height in CSS dovrebbe aiutarlo ... Immagino

— Alfabravo,

1

È interessante notare che questo ha risolto i miei problemi di scorrimento piuttosto che causarli

— Alan Macdonald

Non funziona per me nell'ultima versione di Chrome.

— HelloWorldNoMore

49

Cercherò di rispondere alla domanda direttamente nel titolo, piuttosto che essere intenzionato a mettere un piè di pagina in fondo alla pagina.

Rendi div esteso fino alla fine della pagina se non c'è abbastanza contenuto per riempire la finestra verticale del browser disponibile:

Demo su (trascinare la maniglia della cornice per vedere l'effetto): http://jsfiddle.net/NN7ky
(lato positivo: pulito, semplice. Lato negativo: richiede flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da: o ho troppo sonno

— Gima
fonte

14

Alcuni di noi sono abbastanza fortunati da supportare solo i browser "moderni", quindi questo è stato incredibilmente utile per me. Grazie Gima. Ho provato diversi modi per fare qualcosa del genere, ma è stato sempre rotto in vari modi sottili. È molto meglio Ancora non capisco esattamente perché funzioni in questo modo.

— Chris Nicola,

1

L'elemento Flexbox tenta di dividere l'area del contenuto tra gli elementi in essa contenuti. La soluzione che ho offerto funziona per 1) negare il restringimento dei div e 2) consentire la crescita di .div2. Quindi i div non si riducono per nascondere il loro contenuto e solo .div2 può espandersi.

— Gima,

Quindi questo risolve il problema che stavo avendo in Firefox, dove il contenuto era ancora leggermente troppo grande per il browser. Sfortunatamente, in Chrome, questo da solo non risolve questo problema. Tuttavia, anche l'impostazione del margine e del padding su 0 fa.

— Michael Scheper,

questa è la risposta corretta, altezza minima: il 100% funziona solo se non c'è niente di più nel contenitore principale, e calc non è davvero d'aiuto se il fratello sopra l'elemento in espansione ha un'altezza sconosciuta

— zakius,

Dopo ore alle prese con questo problema, questa è l'unica soluzione che l'ha risolto davvero per me. Manca solo una piccola spiegazione di ciò che fa ogni parte. Ma comunque, grazie mille @Gima.

— Pilone del

18

Prova a giocare con la seguente regola CSS:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Modifica l'altezza per adattarla alla tua pagina. l'altezza è menzionata due volte per la compatibilità tra browser.

— Kevin Leggi
fonte

funziona, ma ho scoperto che se aumento l'altezza minima a più di 600 px, crea una pergamena. Avresti idea del perché questo stia accadendo?

— Siddharth Patel,

1

@SiddharthPatel Perché il div #content sta traboccando il suo genitore. Quindi imposta il genitore del div #content per avere un overflow: auto o overflow: valore css nascosto e dovrebbe espandersi / overflow per adattarsi, piuttosto che scorrere. Probabilmente sarebbe meglio porre domande come nuove domande la prossima volta piuttosto che commenti :)

— Colt McCormack

Dopo aver provato il metodo di ciascuna risposta, questo è l'unico che funziona. Anche questo funziona perfettamente, perché devo regolare il valore dell'altezza in modo che corrisponda all'altezza della pagina, quindi ci vogliono modifiche. Tuttavia, funziona allo stesso modo per tutti i browser.

— TARKUS,

Grazie mille per questa risposta È semplicemente e funziona bene su più piattaforme. In realtà l'avevo usato prima senza rendermene conto circa 1 anno fa, vorrei poter votare due volte.

— vedi0boy,

6

puoi un po 'hackerarlo con la dichiarazione di altezza minima

<div style="min-height: 100%">stuff</div>

— Owen
fonte

4

Prova la soluzione "Sticky Footer" di Ryan Fait,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Funziona su IE, Firefox, Chrome, Safari e presumibilmente anche Opera, ma non l'ho testato. È un'ottima soluzione. Molto facile e affidabile da implementare.

— Anjisan
fonte

7

Link in basso! Collegamenti in basso!

— codemirror,

3

Ecco ai nostri amici caduti 🍻

— Abraham Brookes,

1

LINK

— c24w

3

La proprietà di altezza minima non è supportata da tutti i browser. Se hai bisogno del tuo #content per estenderne l'altezza su pagine più lunghe, la proprietà height lo interromperà.

È un po 'un trucco ma potresti aggiungere un div vuoto con una larghezza di 1px e un'altezza di es. 1000px all'interno del tuo div #content. Ciò costringerà il contenuto ad almeno 1000 px di altezza e consentirà comunque di prolungare l'altezza quando necessario

— Gene
fonte

3

Anche se non è elegante come il puro CSS, un po 'di javascript può aiutare a raggiungere questo obiettivo:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

— Adam Franco
fonte

3

Provare:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Non l'ho ancora testato ...

— Steph
fonte

3

Piè di pagina appiccicoso con altezza fissa:

Schema HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

— David Horák
fonte

2

Prova http://mystrd.at/modern-clean-css-sticky-footer/

Il link sopra è inattivo, ma questo link https://stackoverflow.com/a/18066619/1944643 è ok. : D

demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

— Vinicius José Latorre
fonte

1

@codemirror grazie, ho appena modificato il commento con un altro link che funziona.

— Vinicius José Latorre,

1

È possibile utilizzare l'unità di lunghezza "vh" per la proprietà di altezza minima dell'elemento stesso e dei suoi genitori. È supportato da IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

— nico
fonte

Questo allunga il div solo all'altezza della finestra, non alla pagina stessa.

— Janansmolders86,

1

Penso che il problema sarebbe risolto solo facendo riempire l'html anche al 100%, potrebbe essere il corpo riempie il 100% dell'html ma html non riempie il 100% dello schermo.

Prova con:

html, body {
      height: 100%;
}

— David Marciel
fonte

0

Potrebbe piacerti anche questo: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Non è esattamente quello che hai chiesto, ma potrebbe anche soddisfare le tue esigenze.

— Dan
fonte

0

Non ho il codice, ma so di averlo fatto una volta usando una combinazione di altezza: 1000 px e margine inferiore: -1000 px; Prova questo.

— Alexander Morland
fonte

Wow, funziona davvero! Ma se il contenuto trabocca nel contenitore, non è possibile vedere la parte traboccata ...

— adripanico,

0

A seconda di come funziona il layout, è possibile cavarsela impostando lo sfondo <html>sull'elemento, che è sempre almeno l'altezza della finestra.

0

Non è possibile farlo utilizzando solo i fogli di stile (CSS). Alcuni browser non accetteranno

height: 100%;

come valore superiore rispetto al punto di vista della finestra del browser.

Javascript è la soluzione cross browser più semplice, anche se, come detto, non bella o pulita.

— balestruccio
fonte

-2

So che questo non è il metodo migliore, ma non sono riuscito a capirlo senza incasinare posizioni di intestazione, menu, ecc. Quindi .... ho usato un tavolo per quelle due colonne. Era una soluzione VELOCE. Nessun JS necessario;)

— Wen-D
fonte

-2

Non è il migliore né la migliore implementazione dei più grandi standard, ma puoi cambiare il DIV per uno SPAN ... Non è una soluzione così raccomandabile ma veloce = P =)

— Metafaniel
fonte