3

固定の高さ、661px、横向きモードのiPadでのSafariの高さのページがあります。iPadでは、スクロールしたくありません。コンテンツは正確に適合する必要があります。

ただし、背の高いブラウザウィンドウでは、661pxの折り畳みの下に追加のコンテンツ（著作権表示）を表示したいと思います。ただし、ウィンドウの高さが661ピクセル未満になるまで、スクロールバーは表示されません。つまり、スクロールバーが表示される前にフッターを切り取る必要があります。

+--------+    +--------+    +--------+ ^
|        |    |        |    |        | #
|        |    |        |    |        | v
+--------+    +--------+
  Footer 

   (1)           (2)           (3)
  1. 661pxより高いウィンドウ。スクロールバーなし
  2. ウィンドウは正確に661pxです。フッターはクリップされていますが、スクロールバーはありません
  3. 661px未満のウィンドウ。スクロールバーが表示されます

私の簡略化されたマークアップは次のとおりです。

<body>
  <div class="all">
    ... main content ...
    <div class="footer">Copyright!</div>
  </div>
</body>

そして対応するCSS：

.all {
  height: 661px;
  overflow: visible;
}

.footer {
  position: absolute;
  left: 0px;
  top: 661px;
}

これにより、すべての要素が適切な場所に配置されますが、フッターがページの高さに影響を与えるため、高さが低い要素の内部にある場合でも、スクロールバーがトリガーされます。overflowとの組み合わせはなく、ChromeでもFirefoxでもこれを修正しているようheightです。htmlbody.all

これを行う正しい方法は何ですか？

また、より一般的な質問をしたいと思います。ウィンドウのスクロールバーはどのようにトリガーされますか？どうやら、Chromeインスペクターが両方を示し、予想される661pxの高さを持っているので、の高さbodyがウィンドウよりも大きいかどうかだけではありません。htmlbody

4

1 に答える 1

2

条件付きスタイルシートを使用しないのはなぜですか? 次のタグを追加します

media="screen AND (max-height:661px)"

をスタイルシートに追加すると、ブラウザ ウィンドウの最大高さが 661px の画面表示にのみ適用されます。これには計算上、iPad が含まれますが、それより大きくはありません。次に、このシートで著作権情報を作成display:noneして、ドキュメント フローから削除することができます。

あなたの編集を見たところです。メディア属性の高さプロパティを使用して、必要なことを実行できるはずです。コンテンツは 661 ピクセルの高さの画面に収まるようにピクセル単位でサイズが縮小されると想定しているため、実際に行う必要があるのは、背の高い画面の著作権情報を挿入することだけです。小さい画面には自動的にスクロールバーが表示され、661px の iPad 画面がぴったりと収まるはずです。

これをテストすることはできないので、どのように機能するか (または機能しないか) を教えていただければ幸いです :)

于 2012-12-09T15:53:30.047 に答える