Wysokość ustawiania od 100% do div powoduje pionowy pasek przewijania

Question

Istnieją tylko trzy wiersze tekstu w części div w treści. Kolor tła wypełniał tylko te 3 wiersze tekstu.

jak chciałem koloru do wypełnienia 100% w pionie z przeglądarki, po prostu ustawić CSS height właściwości html & organizmie 100%. Ale pionowy pasek przewijania pojawia się teraz. Jak mogę je ukryć/usunąć?

Próbowałem overflow:hidden; dla właściwości html oraz div, ale bez powodzenia. Korzystanie z przeglądarki 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

Bądź logodiv pozycjonowany bezwzględnie:

http://jsfiddle.net/Gcduf/

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

Answer 2

Zastosowanie min-height: 100% zamiast dodać ujemny margines do .content przesunąć go:

.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

Uwaga: W celu popchnąć zawartość .content elementu, użyłem ::before selektor pseudo-elementu, innym rozwiązaniem mogłoby być:

Korzystanie box-sizing: border-box i padding-top: 40px deklaracje 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: Obecnie wszystkie główne nowoczesne przeglądarki obsługują właściwość pseudoelementu i/lub i/lub box-sizing. Ale jeśli szukasz tradycyjnego sposobu obsługiwania wszystkich przeglądarek, możesz utworzyć podział .spacer, jako pierwsze dziecko elementu .content i ustawić height: 40px; na .spacer.

JSBin Demo #3

Answer 3

Masz .logodiv z height: 40px.

I masz .content z height: 100%.

Dodaj te dwa elementy razem, a ich suma przekracza wartość height: 100% ich kontenera (body). To jest powód pionowego paska przewijania.

Spróbuj:

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

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

Funkcja calc() umożliwia wyrażenie matematyczne dodawania (+) odejmowania (-), mnożenia (*), a podział (/) do użycia jako wartości komponentów .

wsparcie Browser jest całkiem dobre: ​​http://caniuse.com/#search=calc