divs/cssを使用して2フレーム水平タイルフレームセットの動作を作成するにはどうすればよいですか？

私はこのようなウェブページのレイアウトしようとしている：私はフレームセットでこれを行っていると思います古い昔divs/cssを使用して2フレーム水平タイルフレームセットの動作を作成するにはどうすればよいですか？

|-----------------------| 
| header (fixed)  | <- no scroll bar 
|-----------------------| 
| body    | | 
|      | | 
|      | | <- scroll bar 
|      | | 
|      | | 
|      | | 
|      | | 
| ... continues ... | | 
| ... so requires ... | | 
| ... scroll bar ... | | 
|---------------------|-|

を。私はいくつかの理由（それは廃止されていることを含む）のためにそのルートに行きたくありません。

私はこれを、高さ= 100％のテーブルをページの全体として2行で使用し、オーバーフロースタイルをさまざまな場所で非表示に設定していると考えました一番下の行にはメインページの内容のスクロールバーがあります。私は解決策としてこれでOKだろうが、私はそれを正しく設定する方法を覚えていない（私はそれが正しいページ要素を配置することを含むことをかなり確信している：相対または何か、それを動かすために2時間キーボードの上に私の頭は私があきらめるようにそれを取得しようとしている）。

右のdivやcssでできるフレーム/テーブルでできることは何かを読んだので、誰かが私にその解決策を見せてくれるのが本当に好きです。

参考：私は、オーバーフロー：自動ではなくオーバーフロー：スクロール）の内容に基づいて、必要なときだけスクロールバーを表示します。

出典

2011-12-31 Chuck Wilbur

答えはASCIIアートダイアグラムにあります。 – BoltClock

ここでは、ブラウザーウィンドウに他のスクロールバーがない、絶対配置されたヘッダーの下で問題のスクロール可能なコンテンツを完全に解決するソリューションを示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Scrollable 100% high element</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
p{margin:0 0 1em 0} 
html,body{margin:0;padding:0} 
body{ 
    height:100%; 
} 
html>body{ 
    position:absolute; 
    width:100%; 
} 
#content{ 
    background:#d2da9c; 
    overflow:auto; 
    position:absolute; 
    width:100%; 

    left:0; 
    top:100px; 
    bottom:0; 
} 

#top{ 
    position:absolute; 
    left:0; 
    width:100%; 
    top:0px; 
    height:100px; 
    background:red; 
    overflow:hidden; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="content"> 
     <p>Start</p> 
     <p>test</p> 
     <p>test</p> 
    </div> 
</div> 
<div id="top"> 
    <h1>Header</h1> 
</div> 
</body> 
</html>

出典

2011-12-31 06:41:46 MadScientist

これで解決しましたが（解決策が残っていないと思いますが）、解決策はヘッダー領域を変更できるサイズはコンテンツに基づいています。もともと私は、ヘッダーが動的メニューのユーザーの選択に基づいて大きくなる必要があると思っていましたが、クライアントは固定サイズのソリューションに満足しています（コンテンツエリアの上端が飛び跳ねるのを防ぐので、 ..） –

これは固定ヘッダーを行う簡単な方法です。固定フッターも同様にやや複雑にする必要があります。しかしこれはあなたのために働くはずです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
    body{ 
     margin:0; 
     padding:0; 
     position:relative; 
    } 
    body, html, #wrapper { 
     height:100%; 
     position:relative; 
    } 
    #header{ 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100px; 
     background-color:yellow 
    } 
    #wrapper { 
     height:100%; 
     padding-top:100px; 
    } 
    #content{ 
     overflow:auto; 
     height:100%; 
    } 

    </style> 
    </head> 
    <body> 
    <div id="header"> header </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <p>content </p> 

     </div> 
    </div> 
</body> 
</html>

この1つは少し良く私たちは完全に右端のスクロールバーを削除するには下部の間隔を取り除くために必要です。

出典

2011-12-31 06:02:09 MadScientist

ヘッダーの下のプレースメントのために、必要に応じてcontent divに余白とパディングを付けて再生することができます。 – MadScientist

'position：absolute'は明らかに' position：fixed'にする必要があります。 – BoltClock

私はこれに非常に類似したものを試しました。これは同じ問題を抱えていると思います。私のASCIIダイアグラムでは、スクロールバーがヘッダー領域の一番下にどのように止まるかに注意してください。絶対位置のヘッダーを使用すると、スクロールバーは、本体領域のみをスクロールするにもかかわらず、ブラウザーウィンドウの上まで伸びます。これはクライアント（a.k.a.私の妻）に受け入れられませんでした;） –

divs/cssを使用して2フレーム水平タイルフレームセットの動作を作成するにはどうすればよいですか？

答えて

関連する問題