4

ページからはみ出さずにコンテンツを縮小または拡大できる非常にシンプルなモーダルを作成しました - 上下に常に 10% のマージンを残します。ページの高さがモーダル コンテンツをすべて含めるのに十分でない場合、モーダル全体がスクロール可能になります。

ここでjsfiddleを参照してください

CSS のみを使用してこの動作を再現することは可能ですが、モーダル ボディのみをスクロール可能にすることで、ヘッダーは常に固定されます。私はいくつかのことを試しましたが、まだ解決策を思い付いていません。ヘッダーposition: fixedをほとんど機能させるには、モーダルボックスの上に再配置してから、本文にパディングを追加して、ヘッダーの下にコンテンツが表示されるようにする必要があります。これにより、スクロールバーが下に移動しません。いくつかの js をウィンドウのサイズ変更にバインドし、本体の高さを手動で操作する前に、すべての CSS 代替を使い果たすことを常に好みます。

4

2 に答える 2

4

これは遅いかもしれませんが、固定ヘッダー、流体の高さ、流体の幅の同様の問題を解決する必要がありました。

これは私が問題に取り組んだ方法です：

  • 要素にボーダーボックスのボックスサイズを指定します。ラッパーを使用して中央に配置し、バウンディング ボックスを作成します。これは、min-width と max-width + パーセンテージを持つ流動的なものにすることができます。
  • コンテンツ要素に auto の overflow-y と 100% の max-height を与えます。
  • box-sizing:border-box; を使用します。

完全なコードは次のようになります。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.wrap {
   position: relative;
   margin: 0 auto;
   display: block;
   width: 90%;
    /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ 
    max-width: 500px;
    height: 90%;
    padding: 30px;
}
.modal header {
    height: 30px;
    padding: 0;
    color: #FFF;
    background-color: #007;
}
.modal .body {
    background-color: #FFF;
    max-height: 100%;
    overflow-y: auto;
}

http://jsfiddle.net/mariomc/EhR7r/

于 2014-02-17T18:04:16.280 に答える
1

max-heightとのoverflow-y設定.bodyを ... ではなくに適用し.wrapますか?

編集1：

これまでのところ、制約内で何も発生していません。これは、JavaScript または制約から逸脱していることを示唆しています (ヘッダーの高さまたは px マージンに % を使用)。

編集2：

これは、ヘッダーの高さに % を使用した最初のデモです。ヘッダータグにpx を追加しmin-heightて、ヘッダーが非常に小さな画面でほとんど消えないようにしましたが、上部の余白が犠牲になりました (非常に小さな画面では縮小されます)。

高さ >= 400 ピクセルの画面では、要件 (高さ 10% の 40 ピクセルのヘッダー) に従って正確に動作するはずです。ヘッダーの高さが縮小されている場合は、わずかに小さい画面をサポートします (高さ 10% の 30 ピクセルのヘッダーは >= 300 ピクセルの画面をサポートします)。これは、30px ヘッダーのデモです。

これは不器用なソリューションですが、JavaScript を使用せずに実現した唯一のソリューションです。

h2また、同じ要素で高さ % とパディングを組み合わせることを避けるために、タグと タグを追加し.contentてそこに移動したことに注意してくださいpadding:10px;(これにより、指定された % 値よりも高さが高くなります)。

于 2013-03-05T19:27:59.123 に答える