1

私は100％固定しようとしていますが、周りに少し枠があります。私はそれを正しく理解できません。フレームは上下または左右のいずれかに表示されますが、両側からは表示されません...

ここに私がこれまでに持っているものがあります：

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    padding:15px;
}
div.wrap1{
    width:100%;
    height:100%;
    background-color:#00AEEF;
}

ここに画像の説明を入力

EDIT：1 ALLRIGHT THEN、これは私がこれまでに得たものです：

http://jsfiddle.net/Hm7Mw/

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    overflow:auto;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    min-width:962px;
    bottom:6px;
    top:6px;
    left:0px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    max-width:960px;
    height:100%;
    position:relative;
    overflow:visible;
}   
div.wrap3{
    overflow:hidden;
    height:auto;
    min-height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
}

繰り返しますが、スクロールで完全に機能します。ラップの内側ではなく、全体をスクロールするようにしました。

ただし、下にスクロールすると、何らかの理由で下部のパディングが消えます。代わりに内部コンテナーにオーバーフロー自動を配置すると、それは一種の「修正」になりますが、画面の中央に非常に醜いスクロールバーが表示されます。これは望ましくありません。

HTML:

<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">

       (BLA)      

</div>
</div>
</div>
</div>
</div>
4

4 に答える 4

1 
 <div class="all_reviews">

    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                    /8Content/8
        </div>
    </div>
    </div>
</div>

    all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    display:none;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    bottom:25px;
    top:5px;
    left:-10px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    width:100%;
    max-width:940px;
    min-height:100%;
    position:relative;
}   
div.wrap3{
    overflow:auto;
    height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
    border:5px solid #CCC;

    padding:5px;
}

スクリプトで display : none を undo し、overflow:hidden で body を固定して、背景で途中までスクロールしないように注意。

于 2012-06-11T18:36:57.457 に答える
1

次のようなものが必要です。

.onTopOfAll {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
    /* Something else for style */
}

.onTopOfTop {
    bottom: 15px;
    left: 15px;
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 2;
    /* Something else for style */
}
于 2012-06-03T07:00:17.540 に答える
0

100% ではなく、div.all の auto の高さと幅を試してください。体に 100% の高さを追加する必要がある場合があります。

于 2012-06-03T07:11:33.510 に答える
0

あなたのパディングはあなたのdivに余分な幅を追加しています. div の幅を 100% に指定し、パディングを適用すると、幅の合計は 15px + 100% + 15px になります。あなたのhtmlとあなたが何をしようとしているのかについてのアイデアを提供していただければ、私たちの残りの人があなたを助けるのに役立ちます. ありがとう。

于 2012-06-03T08:01:23.777 に答える