1

中央にコンテンツがあるモーダルがあります。しかし、上部には、コンテンツをスクロールしても動かない固定ヘッダーのようなものがあります。問題は、コンテンツが大きくなると (css で高さを 150% に設定)、スクロール バー (Mac OS ユーザーはスクロールバーを有効にしてください) がコンテンツを左に分割し、一方でヘッダーが同じ位置にとどまることです。

コンテンツが壊れないようにするにはどうすればよいですか?

HTML:

<div class="modal">
    <div class="content">
        <div class="header">Some title</div>
        <div class="text">
            Some text
        </div>
    </div>
</div>

CSS:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    background-color: black;
}

.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.5);
}

.content{
    width: 60%;
    position: relative;
    margin: auto;
    z-index: 4;
    height: 150%;
    background-color: white;
}

.header{
    width: 60%;
    background-color: black;
    height: 50px;
    position: fixed;
}

.text{
    padding: 80px 30px;
}

Jsfiddle:

http://jsfiddle.net/Ncpds/5/

アップデート

absoluteモーダルがの代わりになるとfixed、スクロールバーが固定要素に影響を与えないことに気付きました。誰かがなぜこれが起こるのか知っていますか?

Jsfiddle:

http://jsfiddle.net/qUXdG/

モーダルのスクロールバーのposition: fixed動作が異なるのはなぜですか?

ありがとう！

4

1 に答える 1

0

わかりました...だから-あなたが何を望んでいるのかを知るのに本当に苦労しています...しかし、あなたの小さな.click機能は、スクロールバーが表示されたときにページの幅の変化を表示することだと思います。私はあなたがちょうど置く必要があると思います

overflow-y: scroll;

あなたのhtmlまたはボディに...これにより、ジャンプしないようにスクロールバーが常にそこにあることが保証されます。

しかし...本当の問題は、あなたが全体について行っている方法だと思います。あなたが何をしようとしているのかをもっと知っていれば、それを手伝うことができた. -しかし、オーバーフローのアイデアを試してください。

于 2013-06-01T23:19:05.660 に答える