5

HTMLページをそれぞれ50％の2行に分割したいと思います。このために、row1とrow2として機能する2つのdivを作成し、それらの高さをcssで50％に設定しました。行1にはさらに3つのdivがあり、行2にはさらに2つのdivがあります。これらの内部divが50の高さに収容できるほど大きい場合、スクロールバーはそれぞれの行divに表示されますが、row1とrow2は画面の50％のみを占めるようにする必要があります。

私のHTMLの内容は次のとおりです。

<div class="row" id="row1">
    <div class="dragbox" id="item1" >
        <h2 class="dragbox-h2">Handle 1</h2>
        <div class="dragbox-content" >
        Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
  </div>
    </div>
    <div class="dragbox" id="item2" >
        <h2 class="dragbox-h2">Handle 2</h2>
        <div class="dragbox-content" >
            Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. 
        </div>
    </div>
    <div class="dragbox" id="item3" >
        <h2 class="dragbox-h2">Handle 3</h2>
        <div class="dragbox-content" >
            Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. 
        </div>
    </div>
</div>
<div class="row" id="row2" >
    <div class="dragbox" id="item4" >
        <h2 class="dragbox-h2">Handle 4</h2>
        <div class="dragbox-content" >
            Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. 
        </div>
    </div>
    <div class="dragbox" id="item5" >
        <h2 class="dragbox-h2">Handle 5</h2>
        <div class="dragbox-content" >
            Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. 
        </div>
    </div>
</div>

cssのスニペット：

.row{
height:50%;
background:#fff;
overflow-y:auto;
}

.row .dragbox{
margin:5px 2px  20px;
background:#fff;
border:1px solid #ddd;
}

内部タグのコンテンツが増加した場合、row-divも割り当てられた50％の高さに固執することを確認するにはどうすればよいですか。

ありがとう。

4

1 に答える 1

5

row-divの上の親ノードが100％自分自身を占めていることを確認する必要があります。

html, body{
    height: 100%;
}

（パーセンテージの高さは、親からベースの高さを継承します。）

于 2012-07-01T20:49:05.993 に答える