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

Question

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

Edw*_*uay 0 html css twitter-bootstrap twitter-bootstrap-3

我试图建立了多个尺寸屏幕自适应网站,如引导大小xs,sm,md,和lg.

三种较小尺寸的一切都很好,即滚动条仅在需要时出现在右侧.

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

小尺寸OK:

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

附录:

如果我删除overflow-y: scroll,我会在右侧获得滚动条,但内容会在底部之前延伸:

Answer 1

Tec*_*hat 7

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

确切地说,这就是为什么我将此答案标记为正确并在此处提出一个新问题:http://stackoverflow.com/questions/37167577/how-to-get-text-from-scrolling-off-bottom-of-container-yet -keep-滚动条上-F (2认同)

归档时间：	9 年，6 月前
查看次数：	3517 次
最近记录：	9 年，6 月前