L'impostazione dell'altezza 100% su div causa la barra di scorrimento verticale

Question

Ci sono solo 3 righe di testo in un div nel corpo. Il colore di sfondo riempiva solo fino a quelle 3 righe di testo.

Come ho voluto il colore per riempire il 100% in verticale del browser, ho appena impostato il CSS height proprietà di html & corpo per 100%. Ma la barra di scorrimento verticale si presenta ora. Come posso nasconderlo/rimuoverlo?

Ho provato overflow:hidden; per html così come le proprietà div ma senza fortuna. Utilizzando Firefox.

CSS:

* { 
    margin:0; 
    padding:0; 
} 
html,body { 
    width:100%; 
    height:100%;  
} 
.logodiv { 
    width:100%; 
    background-color:#243640; 
    height:40px; 
    color:#FF1442; 
} 
.content { 
    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 
    width:100%; 
    height:100%; 
    overflow: hidden; 
} 

HTML:

<div class="logodiv"> 
    ITEMS LIST 
</div> 
<div class="content"> 
    line1<br> 
    line2<br> 
    line3<br> 
</div> 

Answer 1

Fai logodiv posizionato in modo assoluto:

http://jsfiddle.net/Gcduf/

.logodiv 
{ 
    width:100%; 
    background-color:#243640; 
    height:40px; 
    color:#FF1442; 
    position: absolute; 
    top: 0; 
} 

Answer 2

Usa min-height: 100% invece e aggiungere un margine negativo per .content per spostarlo in su:

.logodiv { 
    position: relative; 
    z-index: 10; 
} 

.content { 
    background-color: gold; 
    min-height:100%; 
    margin-top: -40px; 
} 

.content:before { 
    content: ' '; 
    display: block; 
    height: 40px; 
} 

JSBin Demo #1

Nota: Per abbassare il contenuto di .content dell'elemento, ho usato ::before selettore pseudo-elemento, un'altra opzione potrebbe essere:

Uso box-sizing: border-box e padding-top: 40px dichiarazioni CSS:

.content { 
    background-color: gold; 
    min-height:100%; 
    margin-top: -40px; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    padding-top: 40px; 
} 

JSBin Demo #2

PS: Al giorno d'oggi, tutti i principali browser moderni supportano lo pseudoelemento ::before e/o la proprietà box-sizing. Ma se stai cercando il modo tradizionale supportato da tutti i browser, puoi creare una divisione .spacer come primo figlio dell'elemento .content e impostare height: 40px; su .spacer.

JSBin Demo #3

Answer 3

Hai .logodiv con height: 40px.

E hai .content con un height: 100%.

Aggiungere questi due insieme e la somma supera il height: 100% del loro contenitore (body). Questa è la ragione per la barra di scorrimento verticale.

Prova questo:

.content { height: calc(100% - 40px); } 

DEMO: http://jsfiddle.net/y04jgbaz/

La funzione calc() permette espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) da utilizzare come valori dei componenti .

supporto del browser è abbastanza buono: http://caniuse.com/#search=calc