Question

我希望html页面分为两行，每行50％。为此我创建了两个div作为row1和row2，并设置它们的高度：css为50％。 Row1中还有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％的指定高度。

感谢。

Answer 1

您需要确保row-div上方的父节点自己占用100％：

html, body{
    height: 100%;
}

（百分比高度从其父级继承其基本高度。）

将html页面划分为两行50％的高度

1 个答案: