高さを100％に設定するとdivに垂直スクロールバーが表示されます

Question

bodyのdivには3行のテキストしかありません。背景色は、これらの3行のテキストにのみ満たされていました。

私は色がブラウザの100％垂直を埋めるように、CSS heightの本文を&という本文の100%に設定しました。しかし、垂直スクロールバーが表示されます。どのように私はそれを隠す/削除することができますか？

私はoverflow:hidden;をhtmlとdivプロパティに使ってみましたが、運がありませんでした。 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

logodivは絶対に位置付けてください：

http://jsfiddle.net/Gcduf/

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

Answer 2

使用min-height: 100%代わりに、それをシフトアップする.contentに負のマージンを追加します。

.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

注：は.content要素のコンテンツをプッシュダウンするために、私は::before擬似要素セレクタを使用する、別のオプションは、かもしれない：box-sizing: border-boxとpadding-top: 40px 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：現在、すべての主要な現代のブラウザは::before疑似要素および/またはbox-sizingプロパティをサポートしています。しかし、すべてのブラウザでサポートされている伝統的な方法を探している場合は、.content要素の最初の子として.spacer部門を作成し、height: 40px;から.spacerに設定することができます。

JSBin Demo #3

Answer 3

あなたはheight: 40pxと.logodivを持っています。

.contentはheight: 100%です。

これら2つを合計すると、合計がコンテナのheight: 100%（body）を超えます。これが垂直スクロールバーの理由です。

これを試してください：

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

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

calc()関数は、数学的加算と式（+）、 減算でき（ - ）、乗算（*）、除算（/を）を使用して、 のコンポーネント値として使用します。

ブラウザのサポートはかなり良いです：http://caniuse.com/#search=calc