Chciałbym podzielić stronę html na dwa wiersze po 50% każdy. W tym celu zrobiłem dwa div przedstawiające jako row1 i row2 i ustaw ich wysokość: 50% w css. Row1 ma jeszcze 3 divy, a wiersz 2 zawiera 2 divy. Chcę, jeśli te wewnętrzne elementy div są wystarczająco duże, aby można je było umieścić na wysokości 50, niż paski przewijania powinny znajdować się w odpowiadających im elementach div wiersza, ale wiersz1 i wiersz2 powinny pozostać tylko na 50% ekranu.Podziel stronę html na dwa wiersze o wysokości 50%
Treść mojego HTML jest:
<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>
fragment CSS:
.row{
height:50%;
background:#fff;
overflow-y:auto;
}
.row .dragbox{
margin:5px 2px 20px;
background:#fff;
border:1px solid #ddd;
}
Jak mogę mieć pewność, że jeśli zawartość wewnętrznego wzrostu znaczników następnie również wiersz DIV trzymać się ich 50% przypisana wysokość.
Dzięki.
http://jsfiddle.net/zYDQx/ – anotherdave
Zajmie się sytuacją opisaną w ostatnim zdaniu pytania? –
@anotherdave: Dzięki :) – Harshdeep