スクロールバーを何も表示しない - ページを短くするにはどうすればよいですか？

Question

我々はIE、ChromeとFirefoxの最後の二つのリビジョンをサポートするために持っていると私は、これはIE 7/8では不可能である感じを持っていますが、おそらく私が移動してフッターを持っている何か

が欠落していますコンテンツ領域の後ろに-280pxだけ上がっています。このコンテンツ領域は、ヘッダー領域を-230px上に移動します。その結果、ページの下部に約320ピクセルの空白部分があります。私はこれを塗りつぶして、グラデーションの下端に見えるようにしますが、実際にはそれを切り取るので、何もスクロールバーがありません。以下のコード例で

-

<div id = "page"> 
    <div id = "topbar"> 
    </div> 
    <div id = "header"> 
    </div> 
    <div id = "content"> 
    </div> 
</div> 
<div id = "footer"> 
    I AM THA FOOTAH<br/> So much cooler than the header these days 
</div> 
body 
{ 
/* background-color: #040e22; */ 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    margin: 0px; 
    padding: 0px; 
} 

div 
{ 
    display: block; 
} 


#page 
{ 
    background-color: white; 
    margin: 0px auto; 
    padding: 0px; 
    position: relative; 
} 

#topbar 
{ 
    height: 60px; 
    background-color: #112247; 
    color: white; 
    position: static; 
} 

#header 
{ 
    background-color: navy; 
    color: yellow; 
    height: 240px; 
    position: relative; 
} 

#content 
{ 
    min-height: 280px; 
    background-color: green; 
    width: 480px; 
    margin: auto; 
    position: relative; 
    top: -230px; 
    z-index: 1; 
    height: 2000px; 

} 

#footer 
{ 
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/ 
    background-color: navy; 
    color: white; 
    text-align: center; 
    padding-top: 60px; 
    height: 220px; 
    top: -280px; 
    position: relative; 
} 


.inner 
{ 
    width: 940px; 
    margin: auto; 
} 

はどのように私は海軍フッターの下に白を取り除くのですか？

Answer 1

ちょうど#footerでtop: -280pxからmargin-top: -280pxに変わりました。

相対位置は要素を元の位置に相対的に移動させますが、その領域を維持して空白領域を描画します。負の余白はその境界領域を含む要素を移動し、必要な処理を行います。

Answer 2

あなたはそうのような静的に相対からフッターの位置を変更することができます。

#footer 
{ 
    /*background: url("footerGradient.png") repeat-x 50% 0%;*/ 
    background-color: navy; 
    color: white; 
    text-align: center; 
    padding-top: 60px; 
    height: 220px; 
    bottom: 0px; 
    width: 100%; 
    position: fixed; 
} 

Answer 3

あなたはこのsticky footer pageを見てみることをお勧めします - あなたはフッターの高さをしていないことにより、その技術を変更することができますし、前の要素の負のマージンは同じです。負のマージンを大きくすることをお勧めします。