0

私は明らかに間違ったことをしていると確信していますが、それを理解することができませんでした。ライトボックスのサイズは動的 (パーセンテージ幅) で、ライトボックス内のコンテンツは、コンテンツの周囲の境界線 (実際にはボックスの影) を移動することなく、小さな画面で必要に応じて垂直方向にスクロールしたいと考えています。

追加の警告として、動的な高さを持つ「コンテナー」div が必要です。コンテナの div を height: 100% に設定すると、ライトボックスは希望どおりに機能しますが (以下のコードを参照)、高さの設定を削除すると、オーバーフローが正しく機能しなくなります。

動作中のライトボックスのこのデモは、私の質問を明確にするのに役立つはずです:

http://viewer.zmags.com/public/a82492b9?viewType=pubPreview

これが私のCSSです：

html{
height: 100%;}

body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}

div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}

div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}

div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

そして私のHTML： 

<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
4

1 に答える 1

0

ブラウザーのサポート要件で許可されている場合は、div を絶対に配置.containerし、上、左などを適切に設定することを検討してください。

div.container {
  background-color: #6d6d6d;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

ページに他の要素を配置しようとしている場合、これにはいくつかの欠点がありますが、ライトボックスの場合は合理的な解決策です.

于 2014-10-10T15:49:18.150 に答える