2

このスクリーンショットは私の問題を示しています:

http://oi45.tinypic.com/2vskt2a.jpg">

私のページは期待どおりに見えますが (上の画像)、閲覧者がズームアウトすると、右側の要素が内側に移動し、右側に空のスペースが残ります (下の画像)。これは起こらないはずです。要素は常に右側にある必要があります。

これは私が試した CSS コードです。ブラウザのズームアウト機能でテストするまではうまくいきました。

#left {
    width:920px;
    top:120px;
    height:400px;
    position:absolute;
    background:#fff;
}
#right {
    position:fixed;
    right:0px;
    left:920px;
    height:400px;
    overflow-y:auto;
}
4

2 に答える 2

1

これはうまくいきますか？

HTML:

<div id="head">
</div>
<div id="content">
    <div id="nav">
    </div>
    <p>
        content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </p>
</div>
<div id="foot">
</div>​

CSS:

#head{
    height:100px;
    background-color:black;
}

#foot{
    height:100px;
    background-color:black;
}

#content{
    height:100px;
}

#nav{
    height:100px;
    width:100px;
    background-color:gray;
    float:right;
}

デモ</a>

UPD : html を更新したため、内部の一部のコンテンツで適切に動作します。

UPD2 : コンテンツに触れたので、コンテンツに追加することもできoverflow:autoます。完全に収まらない場合でも表示できます:デモ

于 2012-08-30T20:17:24.750 に答える
0

パーセンテージで行うことをお勧めします (画面の解像度が 1024 px であると仮定します)。

#left {
width:90%;
float:left;
height:400px;
background:#fff;}

#right {
float:right;
width:10%;
height:400px;
overflow-y:auto;
}
于 2012-08-31T18:51:34.167 に答える