Aide à la programmation, réponses aux questions / Html / Comment faire disparaître la barre de défilement quand on n'en a pas besoin? - html, css, twitter-bootstrap, twitter-bootstrap-3

Comment faire disparaître la barre de défilement lorsqu'elle n'est pas nécessaire? - html, css, twitter-bootstrap, twitter-bootstrap-3

J'essaie de configurer un site responsive pour des écrans de tailles multiples, par exemple des tailles de bootstrap xs, sm, md, et lg.

Tout fonctionne correctement pour les trois tailles les plus petites, c’est-à-dire que la barre de défilement n’est présente que du côté droit lorsque cela est nécessaire.

Cependant, sur le écran de grande taille, qui a une largeur de 1024px pour qu’il ne devienne pas trop large, Comment puis-je faire en sorte que la barre de défilement verticale n'apparaisse que lorsque c'est nécessaire?

TAILLES PLUS PETITES OK:

LARGE SIZE a une barre de défilement inutile lorsqu'elle n'est pas nécessaire:

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

ADDENDA:

Si je retire overflow-y: scroll, J’obtiens la barre de défilement à droite, mais le contenu s’étend alors avant le bas