2

header とsticky footerのレイアウトがあります。どちらも高さ40pxです。ここで、(垂直方向に) 空きスペースを埋めるスクロールバーを脇に追加する必要があります。次のようになります。

プレビュー

次の 2 つの制限があります。

  • JavaScript なし
  • CSS3 calc() 関数がありません

この問題の厳密な CSS ソリューションはありますか?

4

2 に答える 2

0

position: fixed、マージン（テスト目的で42px、42ですが、実際には40pxである必要があるため）と 内に追加の divのみを使用#asideすると、次のフィドルが機能します：http: //jsfiddle.net/PhilippeVay/xcuVv/2/ Firefox、Chrome、Safari 4、IE8、Opera 11 または 12 では動作しますが、IE7 では失敗し、互換性が必要な場合はフォールバックが必要になります。

この設計では次のことを考慮していないことに注意してください。

  • ネットブックまたはスマートフォンの垂直スペース
  • ヘッダーとフッターが 40 ピクセルを超えるとどうなるか (WCAG 2.0 に従ってテキストを最大 200% ズーム、一部の OS とブラウザーで通常より大きなフォントなど)
  • 一部のモバイル ブラウザーでは、内部スクロール (脇へ) はほとんど不可能です。
  • 正確に 1 ページをスクロールするためにスペース キーまたはページ ダウン キーを使用しているユーザーは、1.5 画面分 (80 ピクセルが多すぎます) スクロールし、ユーザーを悩ませます (エラー、私たち)。JSで管理されているボタンをクリックするだけで、バーを非表示にしたり、単一のボタンに縮小したり、バーに戻したりできるようにしてください...
于 2012-09-08T07:42:09.243 に答える