Pomoc w programowaniu, odpowiedzi na pytania / Html / Jak sprawić, by pasek przewijania zniknął, gdy nie jest potrzebny? - html, css, twitter-bootstrap, twitter-bootstrap-3

Jak sprawić, by pasek przewijania zniknął, gdy nie jest potrzebny? - html, css, twitter-bootstrap, twitter-bootstrap-3

Próbuję skonfigurować responsywną witrynę dla ekranów o wielu rozmiarach, np. Rozmiarów Bootstrap xs, sm, md, i lg.

Wszystko działa dobrze na trzech mniejszych rozmiarach, tj. Pasek przewijania jest obecny tylko po prawej stronie, kiedy jest potrzebny.

Jednak na duży ekran, który ma szerokość 1024px, więc nie jest zbyt szeroki, jak mogę uzyskać pionowy pasek przewijania, aby pojawiał się tylko wtedy, gdy jest potrzebny?

MNIEJSZE ROZMIARY OK:

LARGE SIZE ma niepotrzebny pasek przewijania, gdy nie jest potrzebny:

.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>

UZUPEŁNIENIE:

Jeśli usunę overflow-y: scroll, Dostaję pasek przewijania po prawej stronie, ale zawartość rozciąga się przed dnem: