CSS Framework_html/css_WEB-ITnose を探しています-htmlチュートリアル-php.cn

このページは、中央部分と下部部分の 3 つの主要な部分に分かれています

ヘッダーとフッターは常に画面の上部と下部に固定されている必要があります。固定されており、垂直方向の中央に配置する必要があります (ヘッダーとフッターの間で垂直方向の中央に配置)。コンテンツが多い場合、スクロールバーが表示されることがあります。

これら 3 つの div の CSS を書くのを手伝ってください。自分でもいくつか書いてみましたが、それでも期待した効果を達成できませんでした。

ディスカッションへの返信（解決策）

こんな感じですか？メインを垂直方向に中央揃えにする意味がわかりません。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style>body{margin:0px;}#header,#footer{height:150px;border:solid 1px black;position:fixed;top:0px;width:100%;background:#ffffff;left:0px}#main{margin:0px auto;width:1000px;padding-top:150px;}#footer{height:80px;top:auto;bottom:0px;}</style><div id="header">页头</div><div id="main">要求header 和footer始终固定在屏幕最上方和最下方  main高度不固定,要求垂直方向居中（在header和footer之间垂直居中），内容比较多时，可以出现滚动条。<br />  1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1  1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1</div><div id="footer">页脚</div>

ログイン後にコピー

ie6 と互換性がありません。固定位置をサポートしていないため、js を使用する必要があります。ie6 と互換性を持たせるには、独自の js を記述する必要があります

こんな感じですか？メインを垂直方向に中央揃えにする意味がわかりません。。

XML/HTML コード
?

12345678910111213

解像度が異なり、コンピューターごとにディスプレイの高さが異なるためです。メインの高さはクライアントコンピューターの高さです。ヘッダーとフッターを除いた画面メインのコンテンツはこの高さ内で垂直方向に中央揃え（上下中央揃え）

1階のshowboさんからの返信を引用：そうですか？メインを垂直方向に中央揃えにする意味がわかりません。。

XML/HTML コード
?

12345678910111213

私が投稿したのは、メインの高さを気にする必要はなく、それを超えていればスクロールバーは自動的に表示されます。メインの高さです。ヘッダーとフッターを除いたクライアントコンピューターの画面の高さです。

スクロールしない限り、バーはブラウザのスクロールバーではなく、メインコンテナーに表示されます。これには JS の計算が必要です。

3 階からの引用。 suncaser の返信:
1 階 showbo の返信から引用: メインの垂直方向のセンタリングがわかりません。

XML/HTML コード
" "http://www.w3 . org/TR/xh……
このメインの内容が縦方向センタリング（上下方向のセンタリング）ではありません

上下方向のセンタリングの意味がわかりません。。。ヘッダーとフッターのサイズが異なるので、それらを垂直方向に中央揃えにするにはどうすればよいですか? 。 ? ?

垂直方向のセンタリングの意味がわかりません。。。ヘッダーとフッターのサイズが異なるので、それらを垂直方向に中央揃えにするにはどうすればよいですか? 。 ? ?
絵を描くとより直感的になると思います！

わかりました、js を使用して見つける必要があります

rree

わかりました、js を使用して見つけなければなりません

XML/HTML コード

1 234567891011121314151617181920212223

< ;! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
ありがとうございます!いいですね! 位置: ie6 ではサポートされていませんが、ie6 は夕日のようです