6

したがって、この問題は発生し、おそらく 1000 回解決されています (固定位置コンテナー内のコンテンツのスクロール部分、位置内の子 div の高さ 100%: 固定 div + オーバーフロー自動) が、CSS を動作させることができないようです.

スクロール可能な内部を持つポップアップ div を作成しようとしています。ウィンドウ全体を覆う濃い灰色の div があり、ウィンドウの中央には緑がかった div が必要です。コンテンツが大きすぎてスクロール バーが必要な場合を除き、内側の div には余白が必要で、コンテンツに合わせてサイズを調整する必要があります。

スクロールがうまくいきません。最大幅/高さを指定しようとしましたが、それらは無視されるようです。

HTML:

<div class='PopupPanelBG'>
    <div class='PopupPanel'>
        <div>
            <div style='width: 1000px;'>some stuff that is really big</div>
        </div>
    </div>
</div

CSS:

.PopupPanelBG {
    display: table;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

.PopupPanel {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.PopupPanel>div {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    opacity: 0.9;
    background-color: #e1efbb;
    border: 1px solid gray;
    padding: 8px;
    margin: 30px;
    overflow : auto;
}

http://jsfiddle.net/QbmdK/

4

2 に答える 2

4

だから...これは（パーセントで）動作します。

http://jsfiddle.net/Agony/QbmdK/34/

(垂直方向の配置が可能になりました!)

注意したいのは、ラッピングdivにはセットmax-width:50%があり、 にinnerdivは がありmax-width:100%ます。これは、どのような量のデータにも当てはまります。

于 2013-10-28T14:58:32.257 に答える