2009-08-13 13 views
2

私は3行1列のサイトデザインを持っていますが、残りの列に合わせてサイズを変更するようにしたいと思います画面 - (ハードコードされたフッターの高さ+ハードコーディングされたヘッダーの高さ))。 CSSでこれを行うにはかわいい方法がありますか?そうでなければ、どうすればjavascriptでこれを達成できますか?ユーザーのモニターのサイズ/解像度に基づいてdivの高さを動的に変更します

おかげで、

トム

#container { 
    background-color: gray; 
    height: 100%; 
} 
#centercolumn { 
    background-color: white; 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    height: 100%; 
} 
#header { 
    background-color: blue; 
    height: 150px; 
} 
#content { 
    background-color: yellow; 
} 
#footer { 
    height: 50px; 
    background-color: blue; 
} 

<html> 
    <head> 
    <link rel="stylesheet" href="test.css" type="text/css" media="screen"/> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="centercolumn"> 
     <div id="header"> 
      header 
     </div> 
     <div id="content"> 
      content 
     </div> 
     <div id="footer"> 
      footer 
     </div> 
     </div> 
    </div> 
    </body> 
</html> 

答えて

関連する問題