ブートストラップサイズなど、複数のサイズの画面に対応するレスポンシブサイトを設定しようとしています xs, sm, md、および lg.
3つの小さいサイズですべてが正常に機能します。つまり、スクロールバーは必要な場合にのみ右側に表示されます。
ただし、 大画面、幅が1024pxで、幅が広すぎないようにします。 垂直スクロールバーを必要なときにだけ表示するにはどうすればよいですか？
小さいサイズでもOK：
LARGE 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、右側にスクロールバーが表示されますが、コンテンツは下部の前に拡張されます。
回答：
回答№1は6使用 overflow-y: auto; CSS属性。その後、必要な場合にのみスクロールバーが表示されます
回答№2の場合は0
削除する overflow-y: scroll; から .containercssで。そして、なぜあなたは持っていますか container クラスはCSSに2回リストされていますか？