html 占两行,css – 将html页面分成两行50％的高度

我希望html页面分为两行,每行50％.为此我创建了两个div作为row1和row2,并设置它们的高度：css为50％.

Row1中还有3个div,第2行中还有2个div.我希望如果这些内部div大到足以容纳50个高度,那么滚动条应该进入它们各自的行div,但是row1和row2应该仅占据屏幕的50％.

我的HTML内容是：

Handle 1

Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.

Handle 2

Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl.

Handle 3

Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare.

Handle 4

Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper.

Handle 5

Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna.

CSS的片段：

.row{

height:50%;

background:#fff;

overflow-y:auto;

}

.row .dragbox{

margin:5px 2px 20px;

background:#fff;

border:1px solid #ddd;

}

我如何确保如果内部标签的内容增加,那么row-div仍然会保持50％的指定高度.

谢谢.