0 
<!DOCTYPE html>
<html><head><style>
html, body{
    width: 99%; /* to prevent scroll bar when unnessery */
    height: 100%;
}
div#main_container{
    position: absolute; 
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
</style></head><body>
<div id='main_container'>
     Some content
</div>
</body></html>

問題：ブラウザのウィンドウをコンテンツブロックよりも小さくすると、ブロックの上部と左側が表示されません-スクロールバーは、コンテンツの上部/左側の最大値にあるように見えますが、上部と右側は表示されません私のブロックが見られます。

なぜそれが起こるのですか、そしてそれを修正する方法は？

3つのブラウザでテストしたので、ブラウザの問題ではありません。

4

1 に答える 1

3

それが起こることを意図しているので、それは起こります。高さが200pxのブラウザの計算を見てみましょう。

では、200pxの50％は何ですか？datarara ..それは100pxです。#main_containerこれにより、y軸の上部が100pxになります。-200pxのマージンを与えると、200px上がります。100pxで、200px上に移動すると、#main_containerの上部は-100pxに配置されます。なぜその一部が隠されているのも不思議ではありません。

ソリューション

解決策は、ブラウザウィンドウではなく、要素を基準にしてposition: absoluteonを作成することです（つまり、onに設定します）。次に、aとonを'sと（それぞれ）に等しく設定することにより、ウィンドウがどれほど短くなっても、ボディの寸法は決して小さくなりません-「オーバーフロー」の可能性はありません。#main_containerbodyposition:relativebodymin-heightmin-widthbody#main_containerheightwidth#main_container

ただし、これらのスタイルをbody要素に適用すると、ページ上に絶対的に配置されたボックスのみが表示されることを前提としています。そうでない場合は、#main_container独自のラッピングdivがおそらく最も互換性のあるソリューションになります。その解決策は次のとおりです。

HTML 

<div class="wrap">
    <div class="box"></div>
</div>

CSS

.wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 800px; min-height: 400px;
}

.box{
    position: absolute;
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
于 2012-07-14T02:51:35.833 に答える