Using Bootstrap, How to Create Multiple Fullscreen Div's to Stack on One Another

Using Bootstrap, how can I create multiple fullscreen div's to stack on one another

Using div's with a 100% height won't solve your problem. Since you're already looking at the Bootstrap I assume that you're not afraid of using Javascript or Jquery. Therefor, you can use this little code to set the height of you div always 100% of your screen.

$("div_name").css("min-height", $(window).height() );

Using this little code, will set the height of your div that's wrapping your section. So, for every part of your website that needs the height of your window ( 100% ) you have to use a 'wrapper' div. So it would be something like this:

<div class="section">
    <h2>Section 1!</h2>
    <p>This is just an section with the same height as your browser.</p>
</div>
<div class="section">
    <h2>Section 2!</h2>
    <p>This is just an section with the same height as your browser.</p>
</div>

If you want an example, you can take a look at my portfolio: http://portfolio.stikkie.net/

Create multiple full screen divs

Try giving your div's a vh style. Such as

div {max-height:100vh;} // this will give your div a max height of 100 vertical height which is set to full screen size.

http://www.w3schools.com/cssref/css_units.asp

Multiple fullscreen divs on top of each other

I believe its working as it should !

Both divs have 100% height , when you increase the window size by x pixels both top and bottom div's get x more pixels in height... and 'pushes' the lower div down !

im not a jquery expert... but something like this for when your on the bottom div should do the trick !

$(window).resize(function() {
    $('html, body').animate({ scrollTop: $(document).height() },  0);
                  return false;
             });

CSS for Multiple Fullscreen Rows w/ Bootstrap

Instead of using 100% for your height, you could use 100vh. vhis viewport height.

Your .fullscreen css should now be:

.fullscreen {
    height: 100vh;
    width: 100%
}

How to place two html elements that are full screen size on top of each other

You need to use the attribute class, not className.

After that is fixed, all you need to do is set the height of the first div, and maybe the margin of the body, which might already be covered if you have some kind of css reset.

100vh is a convenient value to use. You can use 100%, but that is relative to the container, so you would have to set the height of .main or of the body. 100vh simply means the height of the viewport:

.intro {  height: 100vh;}

<div class="main">  <div class="intro">    <div class="intro__header">      Hello, world!    </div>  </div>  <div class="about">About section  </div></div>

place html after a full screen height responsive div using Bootstrap 4

Your issue is that your are specifying height 100% for the container, but 100% of what? In your case the body tag, but the body gets it's height from the size of your content(which on full screen is about 1000px for the first content box), then you also specify 100% height for each of your content boxes. Again 100% of what? The container, which is 1000px is this example. So the footer jumps up after what it thinks the size of page, but then each of the additional content boxes also get that same height, which leads to your weird situation.

In short if you need to keep the 100% height on the container, try adding overflow: auto to the container. Otherwise you could remove the 100% height rule from the container.

Create a full screen div with next / previous links

I created very simple functions to do what you want. I tried to start from your code so it's more simple for you (I hope) to understand what happens.

I created a loop (when you arrive at the end of your pages and click to "next button", you start from the first page) and I added 2 functions to set on the top of the browser windows the last page you clicked when you resize the page (you can remove them if you don't care about this staff).

So this is my code, enjoy it! ;)

$(document).ready(function() {
      var myPage=1;      var totPages=$(".page").length;
      scroll(myPage); /* This put the page 1 on the top of the window when you visit for the first time the web page.*/
      $(".next, .prev").click(function(event) {        event.preventDefault();
        if($(this).hasClass("next")){          myPage = (myPage==totPages) ? 1 : myPage+1;        } else{          myPage = (myPage==1) ? totPages : myPage-1;         } 
        scroll(myPage);      });

      function scroll(nextPage){        $('html, body').animate({            scrollTop: $("div[data-id='"+nextPage+"']").offset().top        }, 800);      }
      /* These 2 functions put the last page you clicked on the top when you resize      browser window. You can remove them if you do not care this stuff*/
      var resize;      $(window).resize(function() {        clearTimeout(resize);        resize = setTimeout(resizeStuff, 200);      });            function resizeStuff() {        scroll(myPage);      }
    });

   body,    html,    #pages,    #app,    .page {      height: 100vh;      margin: 0px;    }
    #app {      background-color: #dcdcdc;    }
  

    /*************************************************************************************************/

    /* Prev & next button styling                                                                    */

    /*************************************************************************************************/
    p {      font-size: 0;      /* Fixes inline block spacing */    }
    span {  /*border: 1px solid #fff;*/  width: 50%;  display: inline-block;}
span.align-left {  left: 0%;  text-align: left;}
span.align-right {  right: 0%;  text-align: right;}
span.align-left,span.align-right {  top: 50%;  position: fixed;}
span a {  font-size: 16px;}
a {  text-decoration: none;  display: inline-block;  padding: 8px 16px;}
a:hover {  color: black;}
.prev {  background-color: #f1f1f1;  color: black;}
.next {  background-color: #ed6e0f;  color: white;}
.round {  border-radius: 50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="app">    <div id="pages">      <p>        <span class="align-left">            <a href="#" class="prev round">‹</a>          </span>        <span class="align-right">            <a href="#" class="next round">›</a>          </span>      </p>
      <div class="page" data-id="1" style="background-color:#ff0000;">        Our Services      </div>      <div class="page" data-id="2" style="background-color:#00ff00;">        Menu Examples      </div>      <div class="page" data-id="3" style="background-color:#0000ff;">        Book Your Chef      </div>      <div class="page" data-id="4" style="background-color:#ffff00;">        Contact Us      </div>      <div class="page" data-id="5" style="background-color:#123456;">        Live Feed      </div>    </div>  </div>

Bootstrap fullscreen layout with 100% height

All you have to do is have a height of 100vh on your main container/wrapper, and then set height 100% or 50% for child elements.. depending on what you're trying to achieve. I tried to copy your mock up in a basic sense.

In case you want to center stuff within, look into flexbox. I put in an example for you.

You can view it on full screen, and resize the browser and see how it works. The layout stays the same.

.left {  background: grey;  }
.right {  background: black;  }
.main-wrapper {  height: 100vh;  }
.section {  height: 100%;    display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}
.half {  background: #f9f9f9;  height: 50%;    width: 100%;  margin: 15px 0;}
h4 {  color: white;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="main-wrapper">  <div class="section left col-xs-3">    <div class="half"><h4>Top left</h4></div>    <div class="half"><h4>Bottom left</h4></div>  </div>  <div class="section right col-xs-9">    <h4>Extra step: center stuff here</h4>  </div></div>

---

Related Topics