1

ページ上で DIV を垂直方向に中央揃えにする (および水平方向にも中央揃えにする) ために使用する次の CSS があります。ブラウザ ウィンドウの高さが 600px 未満の場合、ウィンドウをスクロールして DIV 全体を表示できるようにしたいと考えています。ただし、DIV はページの中央に配置されるだけで、ブラウザの高さを超える部分は非表示になり、スクロール バーは表示されません。ユーザーがこれらの非表示領域にスクロールできるようにする方法はありますか?

#container{
    width:800px;
    height:600px;
    position:absolute;
    margin-top:-300px;
    top:50%;
    margin-left:-400px;
    left:50%;
}
4

5 に答える 5

1

およびの@mediaクエリを追加しますmax-widthmax-height 

@media (max-width: 800px) {
    #container {
        left: 0px;
        margin-left: 0px;
    }
}

@media (max-height: 600px) {
    #container {
        top: 0px;
        margin-top: 0px;
    }
}

JSFiddle

于 2013-01-30T00:52:49.470 に答える
0

追加してみることもできます

overflow:scroll;

オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。

于 2013-01-29T11:33:50.340 に答える
0

これを使って

  #container
    {
    width:800px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    }
于 2013-01-29T11:58:27.713 に答える
0

これをチェック

#container{
position: absolute;
top: 50%;
left: 50%;
width: 30em;
height: 18em;
margin-top: -9em;
margin-left: -15em;
border: 1px solid #ccc;
background-color: #f3f3f3;
}
于 2013-01-29T11:45:43.523 に答える
-1

あなたは使用しているので、 withを作成してに設定position: absolute;しない限り、これを達成する方法はありませんdivmin-widthmarginauto

<div>vertically centered div</div>
<div>min-width div</div>

div:nth-of-type(2) {
   min-width: 1000px; /*Change accordingly*/
}
于 2013-01-29T11:31:27.487 に答える