4 - 25% height row layout

Design help General
1

Want to create a 4 row site that the 4 different rows are the same height - 25% of height of browser. But every time i drop in a section and change the height to 25% it makes the row 1 px high. Not sure how t do this. Help. Want the height of each row to adapt to different browser sizes.

Thanks

Sean

2 
<div> <-- position: absolute; top:0; left:0; height: 100%; width: 100%
 <div class="row"> <-- height:25%
 <div class="row"> <-- height:25%
 <div class="row"> <-- height:25%
 <div class="row"> <-- height:25%

You need a parent container to find the viewport height.

3

Thanks that worked. Exactly what i was looking to do.

1 Like