CODEWITHSUNDEEP
csstwitter-bootstrap-3heightrow
RocketNuts
RocketNuts

Reputation: 11130

Insert a bootstrap3 row that is full display height?

I've got a simple Bootstrap3 page, with some existing rows, and I want to insert a single new row that is full screen height.

What's the best (most clean & compatible) way to do this? I'd say using CSS3's new "height:100vh" would do the trick, but it still doesn't seem to be supported in quite some browsers.

Upon searching I came accross all sorts of tricks and wizardry, including using jquery, or plugins, but I wonder if there is just a simple css attribute or Bootstrap3 class that I can use for this?

Note that my page does not consist of just this one full-height row, I've got several dynamically sizes rows with random content, and now I want to insert one new row that has to be full screen height.

Upvotes: 1

Views: 60

Answers (1)

Core972
Core972

Reputation: 4114

height:100vh

Should do the trick like you said, IE 9 support it very well.

EDIT : For android user then forget CSS use Javascript :

var h = document.getElementById("container").offsetHeight; //the parent container or body
document.getElementById("my_100_percent_row").style.height = h + "px"; //the row that must have 100% height

Upvotes: 1

Related Questions