CODEWITHSUNDEEP
csshtmlionic-framework
Jolle
Jolle

Reputation: 1426

How to get three equally high rows?

I want an Ionic page/template consisting of three equally high rows - mening that they must scale with the screen size.

This is easy with columns using the Explicit Column Percentage Classnames, but I can't find a similar tool for the rows?

Upvotes: 0

Views: 116

Answers (3)

Zudian
Zudian

Reputation: 1

Typically you won't find this kind of feature for the rows. As already suggested, add a height of:

div {height: 33.3vh;}

Although if you want to keep it responsive on all screen sizes/devices then I would suggest using

div {min-height: 33.3vh; overflow: hidden; }

So then if anything is too large for this area then its not going to go outside of the div..

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

If you want to have 3 rows that are perfectly sized based on the viewport just use the vh unit in pure CSS.

* {
  margin:0;
  padding:0;
}
div {
  background:red;
  height:33.33vh;
}
div:nth-child(odd) {
  background:green;
}
<div>1</div>
<div>2</div>
<div>3</div>

1vh is always equal to 1% of the current viewport height, and supported by all browsers.

Upvotes: 3

Aaron
Aaron

Reputation: 10450

Have you tried using viewport height?

div {height: 33.3vh;}
<div style="background: grey"></div>
<div style="background: orange"></div>
<div style="background: yellow"></div>

Upvotes: 0

Related Questions