Bootstrap - messed up #media and overflow issue - css

Question

https://jsfiddle.net/537wen91/
I am using Bootstrap, and in the example, if you make html view wide, scrollbars disappear, when the view is narrow scrollbars show up. That is what I want. The problem starts when I am in the "narrow view": scroll down to the gray box, now expand html view, see how scrollbars are gone (good), but I also lost my text at the top (not good). Why is my text at the top gone?
Edited to clarify
This way it works: On page load - don't scroll anywhere and stretch the screen so that you see all colored columns on one row. You see some text at top, columns at the bottom, no scrollbar. This is how it should be.
This way it doesn't: Refresh page. Scroll down to the pink column. Now stretch it so that all colored columns appear on one row. See that my text at the top is gone? Why?
If this is still not clear, I would have to make a screen recording...
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2>title</h2>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>bbb</p>
</div>
<div class="col-md-2">
<h2>title</h2>
<p>bbb</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>title</h2>
</div>
</div>
<div id="see" class="row">
<div class="col-md-2" style="background-color: #FFC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #FC9;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
</div>
</div>
<nav class="navbar navbar-fixed-bottom">
<p>Place sticky footer content here.</p>
</nav>
CSS
html {
/*position: relative;
min-height: 100%;*/
height: 100%;
}
body {
overflow: hidden;
}
#see > div {
height: 1200px;
}
.navbar {
margin-bottom: 0;
min-height: inherit;
}
nav {
background-color: #222;
color: #666;
}
#media (max-width: 992px) {
body {
overflow: auto;
}
#see > div {
height: 500px;
}
}
JS
$(window).bind('resize load', function () {
if ($(this).width() <= 992) {
$('nav').removeClass('navbar-fixed-bottom');
} else {
$('nav').addClass('navbar-fixed-bottom');
}
});

Answer 1

As mentioned above, the issue is that #see div changes width but not height, and as the page was scrolled, the scrolling remains, leaving the text out of the viewport. Something like this (excuse my poor MSPaint skills):
One possible solution for that would be to scroll to the top of the page right before that change is made, so the text is always visible. You can achieve that just by adding a line of code:
$(window).scrollTop(0);
You can see it working here: https://jsfiddle.net/537wen91/12/
One possible CSS-only solution would be to, if the text height is constant, for the #see div add a height of calc(100% - HEIGHT_OF_TEXT). But I haven't tried this.

Answer 2

Try replacing:
body { overflow: hidden; }
with
body { overflow: auto; }
More info on Overflow values: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 3

You may have to define what happens in different view sizes, using Bootstrap's grid layout: http://getbootstrap.com/css/#grid
In your class, define grid sizes for these:
.col-xs- .col-sm- .col-md- .col-lg-
Add hidden-xs to your class to hide in extra-small, or hidden-md in medium views, and so on (in the Fiddle below, if you make the width of the result window narrow enough, you will see this happen,
When you go to a smaller screen size, let's say you want to display two "title" elements instead of four, you would change your HTML to this:
<div class="row">
<div class="hidden-xs col-md-2">
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4">
<div class="hidden-xs col-md-2">
</div>
This makes it so that on smaller screens, the only middle two elements will display as they will take up all 12 columns of the grid. Or you could make it so that on smaller views. Here is a Fiddle: https://jsfiddle.net/1dtnd59s/1/
Basically the column options for different display sizes have to be tweaked, and if you're ok with hiding certain elements on small displays, that will make it easier.