シナリオ:
ヘッダーの高さ + コンテンツの高さが、オーバーフロー コンテンツが非表示になっているビューポートを超えています。コンテンツは絶対に上 0、下 0 に配置され、ヘッダーの高さに等しい上余白があるため、重なることはありません。
Opera の欠陥:
Opera は、要素の上マージンを考慮する前に、(ビューポートに対して) 絶対位置の div の高さを計算しているようです。これは、オーバーフローしたコンテンツが隠されているビューポートの下端を超えて拡張されたコンテンツ (およびヘッダー) 用です ( html{overflow:hidden}
)。
他のブラウザーは、上マージンを適用した後に高さを計算するようであり、その結果、絶対配置された div の全体的な高さが短くなります。Opera ではありませんが、絶対配置された div はビューポートと同じサイズであり、ビューポートを超えてヘッダーの長さまで拡張されます。
回避策:
ビューポートのオーバーフローが隠されているビューポートを超えて拡張された、絶対位置の div で上部マージンを使用しないでください。代わりにtop
、絶対に配置された div のスタイルを上マージンの長さに設定します。
margin-top: 0px;
top: 68px;
これにより、Opera と他のすべてのブラウザーが一貫して動作するようになります。