4

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 several jumbotrons 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!! ;)

ℕʘʘḆḽḘ
  • 17,138
  • 32
  • 109
  • 206

2 Answers2

14

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.

Zim
  • 329,487
  • 83
  • 671
  • 600
0

I believe what you want is actually stacking, full-screen, responsive backgrounds, or stacking divs that conform to the height of the window / viewport.

That's been answered over here:

Full-screen responsive background image

Community
  • 1
  • 1
Ken Prince
  • 1,398
  • 1
  • 19
  • 24