如何在不需要时使滚动条消失?

时间:2016-05-11 15:09:41

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在尝试为多个尺寸的屏幕设置响应式网站,例如引导大小xssmmdlg

在三个较小尺寸上一切正常,即滚动条仅在需要时出现在右侧。

但是,在大尺寸屏幕上,其宽度为1024px,因此不会太宽,如何才能让垂直滚动条仅在需要时显示吗

小尺寸OK: enter image description here

大型尺寸在不需要时有不必要的滚动条: enter image description here

.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,我会在右侧显示滚动条,但内容会在底部之前延伸:

enter image description here

2 个答案:

答案 0 :(得分:6)

使用overflow-y: auto; CSS属性。然后它只在需要时显示滚动条

答案 1 :(得分:0)

从css中的overflow-y: scroll;移除.container。为什么你在CSS中列出了两次container类?