Помощ при програмиране, отговори на въпроси / Html / Как да накараме лентата за превъртане да изчезне, когато не е необходима? - html, css, twitter-bootstrap, twitter-bootstrap-3

Как да направим плъзгача изчезват, когато не е необходимо? - html, css, twitter-bootstrap, twitter-bootstrap-3

Опитвам се да създам отзивчив сайт за множество големи екрани, например размери Bootstrap xs, sm, md, и lg.

Всичко работи добре на трите по-малки размера, т.е. лентата за превъртане присъства само от дясната страна, когато е необходимо.

Въпреки това, на екран с голям размер, която има 1024px ширина, така че да не стане твърде широка, как мога да накарам вертикалната лента за превъртане да се показва само когато е необходима?

ПО-МАЛКИ РАЗМЕРИ ОК:

LOGGE SIZE има ненужна лента за превъртане, когато не е необходима:

.pagecontent {
margin: 0 18px;
}
/* bootstrap override */

.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.navbar-text {
float: left !important;
margin-right: 10px;
}
.navbar-right {
float: right!important;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
}
.container {
width: 1024px;
padding: 0;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
html {
min-height: 100%;
/* make sure it is at least as tall as the viewport */
position: relative;
}
body {
height: 100%;
/* force the BODY element to match the height of the HTML element */
background-color: #999;
}

<!DOCTYPE html>
<html>

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="?">Bootstrap Showcase</a>
</div>

</div>
</nav>
<div class="pagecontent">

<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>
<div>this is a test line</div>

</div>
</div>
</body>

</html>

ДОПЪЛНЕНИЕ:

Ако отстраня overflow-y: scroll, Получавам лентата за превъртане вдясно, но след това съдържанието се разширява преди дъното: