Container in Bootstrap 3 that perfectly adapts to the HEIGHT of the viewers' screen size
You could add a special
CSS class to the container and set it to 100% height. The HTML and BODY must also be 100% height...
html,body {height:100%;}
.special,.special .jumbotron {height:100%;}
Demo: http://bootply.com/80826
This however does not address the issue of seeing only 1 jumbotron at a time.. which is more of a navigation issue than a size issue. You may want to use a carousel for the jumbotrons if you don't want the user to scroll down at all.
Comments
-
ℕʘʘḆḽḘ over 3 years
Here is the problem.
I use
bootstrap 3.0
for a very, very basic website. Still, I would like to add some refinement but I need help.The structure of the website is very basic: a
container
and severaljumbotrons
inside the container.I would like to have EACH Jumbotron to perfectly stretch to the height of the user's browser window, so that whatever the media may be (smartphone, web, etc) a visitor will see ENTIRELY and ONLY one jumbotron at the time without the need of scrolling down with the mouse...
Do you have an idea? Many thanks!! ;)