-1
ウェブページの固定ヘッダーを維持しようとしています。メインコンテンツの場合、スクロールするとメインヘッダー上を移動しません。外部CSSが実装されていません
インラインCSSが期待どおりに機能するのは理解できませんが、同じCSSプロパティを外部スタイルシートに切り替えると機能しません。最初の<div>のプロパティが正しく設定されているため、外部スタイルシートが検出されています。私は2番目のdivでidとclassの両方を使用しようとしましたが、どちらもうまくいかないようです。これは、クラスではなくIDを使用するコードです。
のindex.html：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="height:100%; width:100%">
<div id="fixed-header">
<h1>Page Heading</h1>
</div>
<div id="main-content">
<!-- a number of articles and sections -->
</div>
</body>
</html>
CSS/style.cssに：
#fixed-header {
position:fixed;
height:100px;
top:0px;
overflow:hidden;
}
#main-content {
position:absolute;
top:100px;
left:0px;
right:0px;
overflow:auto;
}
他のCSSコードはありません。
<div id="main-content">を<div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;">に変更すると機能します。
私は間違っていますか？
インラインCSSに100pxというボトムがあり、外部スタイルシートにはないことがわかりました。 – Pxterra
外部のスタイルシートに100pxの下端を追加すると機能します。理由を理解する必要があるが、少なくともそれは機能する。 – Pxterra