html sayfasını iki satırlık% 50 yüksekliğe bölün.

Question

html sayfasının her biri% 50'lik iki sıraya bölünmesini istiyorum. Bunun için row1 ve row2 olarak iki tane div yaptık ve boylarını ayarladık: css'de% 50. Row1 içinde 3 tane daha div var ve 2. satırda 2 tane daha div var. Bu iç boşlukların, 50 yükseklik içinde kayarken yeterince büyük olması halinde, kaydırma çubuklarının kendi sıra divlarına gelmesi gerekir, ancak satır1 ve satır2, yalnızca ekranın% 50'sini kaplayacak şekilde kalmalıdır. Benim HTML

İçerik geçerli: css

<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> 

Pasajı:

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

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

Ben iç etiket artış içeriği daha sonra da eğer satır-div'ler onların% 50 sopa emin olabilirsiniz nasıl atanan yükseklik.

Teşekkürler.

Sen satır div yukarıda ebeveyn düğümleri% 100 kendileri kaplıyor emin olmak gerekir

Answer 1

:

html, body{ 
    height: 100%; 
} 

(Yüzde yükseklikleri ebeveynlerinin onların taban yüksekliği devralır.)