2010-12-16 3 views
0

modelスクロールバー(オーバーフロー時)と固定フッターの下にオートハイトコンテンツを作成するにはどうすればいいですか?

可能ですか?はい|いいえ| javascript?

ok。私が試してみます。

ここには、:

ヘッダーが必要です。固定サイズ、固定位置(上)

コンテンツ。動的な高さは、ウィンドウ、ヘッダー、フッターのサイズによって異なります。オーバーフローした場合はスクロールしてください。

フッター。常に下固定位置。固定サイズ。

ウィンドウ。スクロールしない(重要!)

ps窓に。バグや何かがあります。 FirefoxまたはOperaのキーが「下」の場合は下にスクロールします。 「スクロールなし」 - 非表示の場合でも完了

希望すべてをクリア


。 Tnx。

<html> 
<head> 
<style type="text/css"> 
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */ 
#header{ 
    top:0; 
    left:0; 
    right:0; 
    height: 150px; 
    position:absolute; 

} 
#content { 
    position: absolute; 
    bottom: 150px; /*footer height*/ 
    top:150px; /* header height */ 
    left: 0; 
    right: 0; 
    background: yellow; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    height: 150px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: red; 
} 
</style> 
</head> 
<body> 
<div id='header'> 
Header content 
</div> 
<div id="content"> 
    dynamic content here 
</div> 
<div id="footer"> 
</div> 
</body> 
</html> 

答えて

1

あなたは実際にはより良い質問をすることができます。

<html> 
<head> 
<style type="text/css"> 
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */ 
#content { 
    position: absolute; 
    top: 0; 
    bottom: 150px; 
    left: 0; 
    right: 0; 
    background: yellow; 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    height: 150px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: red; 
} 
</style> 
</head> 
<body> 
<div id="content"> 
</div> 
<div id="footer"> 
</div> 
</body> 
</html> 
+0

私はtryedしました。 tnx – lazycommit

0

こんにちは、StackOverflowので歓迎し、

あなたはより具体的な質問を投稿してくださいだろうか?タイトルに何かを書くだけで、 "可能ですか?はい|いいえ| javascript?"のような本当の質問があります。誰にも役立たない。

質問に答える:はい、可能です。あなたはちょうどいくつかのCSSを使用する必要があります。

+0

私が正確に必要としているものをパン生地にイメージするためのリンクがあります。私は英語にいくつかの問題があります。そう、私はそれを描いた。 – lazycommit

関連する問題