2

高さの既知のタイトルバーと高さの不明なコンテンツ領域を持つライトボックスのようなウィンドウを作成しようとしています。

フローティング疑似要素をvertical-align: middle使用して、垂直方向の中央に配置しています。これは完全に機能します...ウィンドウの高さがビューポートの高さよりも小さい場合。

（CSSトリックからコピーして貼り付けたコード）

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

私の問題は、スクロールするコンテンツがビューポートよりも高くなったときに、ウィンドウの高さを制限し、垂直方向の中央揃えを維持する方法がわからないことです。

ウィンドウにタイトルバーと内部コンテンツ領域がない場合、これはウィンドウ要素にmax-heightとを適用することで簡単に実現できます。overflow: autoしかし、私はタイトルバーが欲しいのですが、この画像のように、スクロールバーをウィンドウのコンテンツ領域にのみ表示したいと思います。

ここに画像の説明を入力してください

overflow: autoコンテンツ領域に設定することはできますがmax-height、パーセントで設定する（ユーザーのビューポートの高さを想定できないため、必要です）は無視されているようです。

このレイアウトはJSを使用せずに可能ですか？

これがで遊ぶデモです。ウィンドウはビューポートの下に溢れていますが、（ビューポートよりも短くするために）十分なコンテンツを削除すると、ウィンドウは垂直方向の中央に配置されます。

4

2 に答える 2

1

希望のパーセンテージの高さを与えて与えるbg height:100%;更新されたデモwindow

.bg {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  text-align: center;
  height:100%; /* The important part you were missing */
}
.window {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  height:75%; /* The height you desire */
}
.bg:before {
  content: '';
  height: 100%;
  vertical-align: middle;
  display: inline-block;  
}
.titlebar {
  height: 30px; /* arbitrary value but height is known and static */
  position: absolute;
  left: 0; right: 0;
}
.window .content {
  margin-top: 30px; /* same abritrary value as titlebar height */
  height:calc(100% - 60px); /* I would think that this would be 30px, 
                               but in practice it needed 60px... */
  overflow:auto;
}

余談ですが、デモのすべての CSS を同じ場所に含める必要があります。デモの最下部にパディングが追加されていることに気付くまで、メソッドが正しく機能しない理由に戸惑いました。

編集

heightどうやらあなたがしたいことは純粋なCSSでは不可能windowですauto。そのため、javascript を 1 行追加したところ、必要に応じて正確に機能します。

document.getElementsByClassName('window')[0].style.height = 
    document.getElementsByClassName('window')[0].offsetHeight + "px";

更新されたデモ

于 2013-11-06T17:29:54.323 に答える
-3 
!important

どの要素でもこれを解決できます。

于 2012-10-31T18:57:46.920 に答える