Aiuto nella programmazione, risposte alle domande / html / Come far scomparire la barra di scorrimento quando non è necessaria? - html, css, twitter-bootstrap, twitter-bootstrap-3

Come far scomparire la barra di scorrimento quando non è necessario? - html, css, twitter-bootstrap, twitter-bootstrap-3

Sto cercando di impostare un sito reattivo per schermi di dimensioni multiple, ad es. Dimensioni Bootstrap xs, sm, md, e lg.

Tutto funziona bene sulle tre dimensioni più piccole, cioè la barra di scorrimento è presente solo sul lato destro quando è necessaria.

Tuttavia, sul schermo di grandi dimensioni, che ha una larghezza di 1024 px in modo che non diventi troppo largo, come posso fare in modo che la barra di scorrimento verticale appaia solo quando è necessaria?

TAGLIE PIÙ PICCOLE OK:

LARGE SIZE ha una barra di scorrimento non necessaria quando non è necessaria:

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

APPENDICE:

Se rimuovo overflow-y: scroll, Ottengo la barra di scorrimento a destra, ma il contenuto si estende prima del fondo: