2

ヘッダーとコンテンツの 2 つの領域があるページがあります。
ヘッダーは[もちろん]上部に固定する必要があり、高さは固定されておらず、その下にコンテンツがあります。

ポイントは、オーバーフローした場合にコンテンツ領域をスクロールする必要があるということです...同様に、ヘッダーは常にそこにある必要がありますが、コンテンツは下にスクロールできます。つまり、バーは常に上部にあり、ページスクロール。

「フッター」の高さが固定されている別のページでこれを行うためにJSを使用しているので、「コンテンツ、ページの高さからフッターの高さを差し引いたものを使用してください」と言うことができます。

これを HTML+CSS のみで実装できますか、それとも JS を使用する必要がありますか? そしてどうやって？

4

3 に答える 3

2

これで済むはず…

#header {
  position:fixed;
}
于 2009-11-23T14:42:21.980 に答える
1

CSSのみが必要です。次のコードは、高さ 100 ピクセルのヘッダー、高さ 50 ピクセルのフッター、およびページの残りの部分を埋める「コンテンツ」という名前の div を中央に作成します。全体がビューポート内の利用可能なすべてのスペースを占有します。ブラウザ ウィンドウのサイズを変更すると、それに応じてページが拡大/縮小されます。

「コンテンツ」divに十分なものがある場合、その中にスクロールバーが表示されます。スクロールバーはヘッダーまたはフッターのどの部分もカバーせず、「コンテンツ」div 内になります。

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

div#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

「左」と「右」を別々に設定すると、利用可能なスペースの特定の量だけを使用することができます。

div#header {
    position: fixed;
    top: 0;
    left: 20%;
    right: 20%;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 20%;
    right: 20%;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 50px;
}

上記の CSS を使用すると、全体が中央に配置され、水平方向に使用可能なスペースの 40% が空のままになります。

于 2009-11-23T14:59:45.703 に答える
0

ヘッダーの高さを設定するとこれが簡単になりますが、最終的には、探しているものを達成するのに JavaScript が役立ちます。基本的に、ユーザー画面の高さとヘッダーの高さを知る必要があります。ユーザー画面の高さからヘッダーの高さを引き、その値を使用してコンテンツの高さを設定します。

必ずoverflow:auto;を設定してください。コンテンツのスクロール バーを取得します。

テーブルではなく、レイアウトにdivを使用していますよね？そうでない場合は、その変更も検討してください。div を使用した Web デザインは、テーブル デザインよりも操作がはるかに簡単です。

このリンクは、画面の高さを取得するために必要な特定の JS プロパティに役立ちます。

于 2009-11-23T14:46:28.790 に答える