空のヘッダーを使用してブラウザの下部に列を延長します。

Question

<div id="content"> 
     <div id="header"> 

     </div> 

     <div id="main-content"> 


     </div> 


    </div> 


html, body{height:100%;margin: 0px; padding: 0px; background-color: black;} 


div#content{width:600px; margin: 0 auto; height:100%;} 

div#header{width:600px; height:200px;} 

div#main-content{width:600px; height:100%; background-color: white;} 

ご覧のとおり、ヘッダーを追加するとすべてが表示されます。メインコンテンツをブラウザの最後まで伸ばしてほしい。

私はバックグラウンドを模倣するために私の背景に似たイメージのヘッダーを作成することでこの問題を回避したと思いますが、私のバックグラウンドは非常に複雑です。

これを行う方法はありますか？おそらく動作しているjavascriptの修正？

Answer 1

メインコンテンツのdivを絶対的に配置し、その上部と下部の属性を指定できます。トップ属性はあなたのヘッダーの下に設定され、底はページの一番下を打つためにゼロに設定されていることをhttp://jsfiddle.net/wrn8Y/1/

 
div#main-content{ 
    position: absolute; 
    top: 200px; 
    width:600px; 
    bottom: 0px; 
    background-color: white; 

} 

注：私はここにjsfiddleセットアップをしました。フッターが必要な場合は、フッターを格納するために下部属性を変更することができます。

はまた、あなたは、私は、一般的にので、ここでそれが行われますいくつかのjQueryコードはjQueryのを使用して、JavaScriptでこれを行うことができます。

 
$('div#main-content').height($(document).height() - $('div#header').height()); 

このJavaScript（jQueryの）比較的配置のdivやCSSのみに動作します変更する必要があるのは、 "div＃main-content"スタイルの "height：100％"を削除することです。