max height on every screen size - bootstrap - html

Question

I want to have a fullscreen page without global scrolling. The background color should be always be 100% height of the screen.
If the content of a column is too big (like the green column in the screenshots), the column itself should have a vertical scrollbar.
Not scrolled:
Scrolled:
My HTML code:
<div class="container-fluit">
<div class="row">
<div class="col-lg-12">
</br>
</div>
</div>
<div class="row">
<div class=" orange col-lg-4 ">
so much content here
</div>
<div class="col-lg-8">
so much content here
</div>
</div>
My CSS Code:
.col-lg-4 {
background:green;
}
.col-lg-12 {
background:blue;
}
.col-lg-8 {
background: orange;
}

Answer 1

You could try to give the body a heigth of 100vh. This in combination with overflow-y: hidden; will remove the scrollbar.
Take a look at this Fiddle

Answer 2

To activate scrollbar at y-axis of internal div, you need to set overflow-y:scroll. But it activates only when your internal content overflows the assigned height. And to hide body scrollbar use overflow-y as hidden i.e. overflow-y:hidden.
body{
overflow-y:hidden;
margin:0;
}
.col-lg-12 {
background:blue;
}
.col-lg-4 {
background:green;
float:left;
width:50%;
height:100vh;
overflow-y:scroll;
}
.col-lg-8 {
background: orange;
float:left;
width:50%;
height:100vh;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br>
</div>
</div>
<div class="row">
<div class = "col-lg-4">
so much content here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta nibh. Cras efficitur efficitur urna non ultricies. Fusce tempus pharetra ex, non efficitur orci tempus ac. Morbi lobortis mi ut neque faucibus bibendum. Sed elit orci, aliquam sed arcu sit amet, placerat fringilla ante. Praesent vel tellus quam. Aliquam et nisl vel nisi dapibus dignissim id sed odio. Pellentesque consequat dapibus nisi aliquam tempor. Proin viverra dolor id nibh tristique, at ullamcorper diam porttitor. Duis viverra dapibus viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis commodo neque ac eros suscipit consectetur. Quisque nisi arcu, ullamcorper tincidunt vestibulum eu, sollicitudin eu leo.
Nunc sollicitudin consectetur suscipit. Suspendisse vestibulum a nulla dapibus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean semper risus quis venenatis elementum. Vestibulum fringilla ipsum id sem luctus pretium. Nunc consequat ornare auctor. Vivamus et ex et mi pellentesque tincidunt fringilla eu arcu. Mauris porttitor volutpat mi. Proin nec ornare sapien. Ut mattis porttitor elementum.
Sed in sapien dapibus, ullamcorper augue nec, volutpat dui. Integer sit amet gravida lacus, eu laoreet arcu. Praesent urna lacus, tristique in diam quis, fermentum rutrum augue. Sed gravida risus vel leo egestas finibus. Ut interdum leo vitae dolor malesuada, quis ullamcorper quam vulputate. Fusce vitae consectetur quam, ut ullamcorper leo. Nullam malesuada dapibus pulvinar. Duis pretium purus at eleifend pharetra.
Curabitur faucibus fermentum neque at tempus. Nam ut consectetur odio. Vivamus risus lectus, suscipit vitae maximus eget, pellentesque interdum purus. Aliquam a eleifend dui. Etiam congue leo a mauris efficitur mollis. Nulla convallis posuere nisl. Morbi pretium ornare enim, ac tristique lacus interdum ullamcorper. Aliquam blandit laoreet dui, a egestas nibh sollicitudin vitae. Vestibulum semper lectus purus, vel tincidunt felis lacinia eget.
Curabitur elit justo, malesuada non laoreet sed, maximus ac eros. Aliquam blandit mauris eget tellus luctus, sed fringilla sapien laoreet. Aliquam erat volutpat. Donec nec hendrerit tellus. Mauris nec erat quis magna pharetra hendrerit. Quisque sit amet sapien non magna blandit cursus at id ante. Fusce non elit at leo sollicitudin consectetur. In quis nibh vitae libero elementum viverra id at turpis. Aliquam vulputate vestibulum orci, non dignissim lorem faucibus vel.
</div>
<div class = "col-lg-8">
so much content here
</div>
</div>
</div>