【问题标题】：Why are my scrollbars not appearing?为什么我的滚动条没有出现？
【发布时间】：2017-10-17 22:49:12
【问题描述】：

我正在设计一个具有顶部带有徽标的标题和一个容器的模板。容器中左侧是垂直导航菜单，顶部是水平导航菜单，剩余容器空间中是内容区域。我希望垂直导航菜单有一个滚动条（工作）和内容区域有一个滚动条（不工作）。我不想要水平导航菜单上的滚动条。整个内部容器是固定的，这就是我想要滚动条的原因。为什么滚动条不显示？在 jsFiddle 中，粉色区域应该有垂直滚动条。

这是jsFiddle。

这是我的 CSS：

body {
  background: green;
  margin: 0;
  padding: 0;
  color: #CCC;
}

a {
  color: #999;
  text-decoration: none;
}

#container-outer {
  margin: 32px;
  padding: 0;
}

#logo {
  background: #000;
  background-repeat: no-repeat;
  margin: 32px auto;
  width: 427px;
  height: 66px;
}

#container-inner {
  border: 1px solid #333333;
  overflow: hidden;
  position: fixed;
  top: 130px;
  left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 130px - 32px);
}

nav#navigation_primary {
  background: red;
  width: 15%;
  border-right: 1px solid #333333;
  height: 100%;
  text-align: center;
  float: left;
  overflow: auto;
}

nav h3 {
  text-align: center;
  font-size: 24px;
  line-height: 48px;
  color: white;
}

nav#navigation_primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav#navigation_primary ul li {
  border-top: 1px solid #222222;
  border-bottom: 1px solid #000;
  margin: 0;
  background-image: url(../img/shadow_horizontal.png);
  background-repeat: repeat-x;
}

nav#navigation_primary ul li a {
  display: block;
  padding: 12px 18px 18px 0px;
  text-align: right;
  color: #fff;
  text-decoration: none;
}

nav#navigation_primary ul li a:hover {
  background: #d28c17;
  color: #333;
}

nav#navigation_secondary {
  height: 66px;
  background: blue;
  margin: 0;
  padding: 0;
  width: calc(85% - 1px);
  border-bottom: 1px solid #333333;
  float: left;
}

nav#navigation_secondary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#navigation_secondary ul li {
  display: inline-block;
}

nav#navigation_secondary ul li a {
  display: block;
  height: 66px;
  line-height: 66px;
  color: #666666;
  font-size: 18px;
  text-decoration: none;
  padding: 0px 12px;
  margin: 0;
  background-image: url(../img/shadow_vertical.png);
  background-repeat: repeat-x;
  border-right: 1px solid #000;
  border-left: 1px solid #222222;
}

nav#navigation_secondary ul li a:hover {
  background: #d28c17;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #d28c17;
  margin: 0px;
}

.panel {
  border: 1px solid #333333;
  padding: 8px;
  overflow: auto;
}

input {
  width: 100%;
  padding: 8px;
  background: #111111;
  border: 1px solid #222222;
  margin-top: 24px;
  color: #666;
}

table {
  margin: 16px 0px;
}

table tr td {
  background: #111111;
  padding: 8px;
}

main {
  background: pink;
  overflow-y: auto;
  margin: 16px;
  padding: 0;
  float: left;
  width: calc(85% - 33px);
  min-height: 150%;
}

.row [class^="col-"]:first-child {
  margin-left: 0;
  padding-left: 0;
}

.row [class^="col-"]:last-child {
  margin-right: 0;
  padding-right: 0;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

<div id="container-outer">
  <div id="logo">Logo Here</div>
  <div id="container-inner">
    <nav id="navigation_primary">
      <h3>Nav Title</h3>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <nav id="navigation_secondary">
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <main>
      <div class="row">
        <div class="col-12">
          <div class="panel">
            <h3>Heading</h3>
            <table align="center" width="100%" cellspacing="1" cellpadding="5">
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你的滚动没有出现，因为你在这里使用 min-height 这永远不会允许溢出：滚动使用 height:100% 而不是这里

你的问题

.main {
  background: pink;
  overflow-y: auto;
  margin: 16px;
  padding: 0;
  float: left;
  width: calc(85% - 33px);
  min-height: 150%;
}

我的解决方案

   .main {
      background: pink;
      overflow-y: auto;
      margin: 16px;
      padding: 0;
      float: left;
      width: calc(85% - 33px);
      height: 100%;
    }

Updated Fiddle

【讨论】：

好的，这样滚动条就会出现，但它不会让我一直向下滚动。如果您滚动到滚动条的底部，检查您看到的最后一个链接，您将看到有两个额外的表格行不可见。
在这种情况下，只需将高度降低到 72% 或取决于您选择适合您的位置

【解决方案2】：

main 元素将为其拥有的每个子元素增加其大小，#container-inner 将溢出 main 的大小，因此，main 将永远不会有滚动，因为它没有 max-height .

解决方案

将main的高度固定为：

#container-inner - #navigation_secondary - main 的边距（顶部和底部 16px）
100% - 66px - 32px

See this jsfiddle

main {
  background: pink;
  overflow-y: auto;
  margin: 16px;
  float: left;
  width: calc(85% - 33px);
  max-height: calc(100% - 66px - 32px);
}

body {
  background: green;
  margin: 0;
  padding: 0;
  color: #CCC;
}

a {
  color: #999;
  text-decoration: none;
}

#container-outer {
  margin: 32px;
  padding: 0;
}

#logo {
  background: #000;
  background-repeat: no-repeat;
  margin: 32px auto;
  width: 427px;
  height: 66px;
}

#container-inner {
  border: 1px solid #333333;
  overflow: hidden;
  position: fixed;
  top: 130px;
  left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 130px - 32px);
}

nav#navigation_primary {
  background: red;
  width: 15%;
  border-right: 1px solid #333333;
  height: 100%;
  text-align: center;
  float: left;
  overflow: auto;
}

nav h3 {
  text-align: center;
  font-size: 24px;
  line-height: 48px;
  color: white;
}

nav#navigation_primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav#navigation_primary ul li {
  border-top: 1px solid #222222;
  border-bottom: 1px solid #000;
  margin: 0;
  background-image: url(../img/shadow_horizontal.png);
  background-repeat: repeat-x;
}

nav#navigation_primary ul li a {
  display: block;
  padding: 12px 18px 18px 0px;
  text-align: right;
  color: #fff;
  text-decoration: none;
}

nav#navigation_primary ul li a:hover {
  background: #d28c17;
  color: #333;
}

nav#navigation_secondary {
  height: 66px;
  background: blue;
  margin: 0;
  padding: 0;
  width: calc(85% - 1px);
  border-bottom: 1px solid #333333;
  float: left;
}

nav#navigation_secondary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#navigation_secondary ul li {
  display: inline-block;
}

nav#navigation_secondary ul li a {
  display: block;
  height: 66px;
  line-height: 66px;
  color: #666666;
  font-size: 18px;
  text-decoration: none;
  padding: 0px 12px;
  margin: 0;
  background-image: url(../img/shadow_vertical.png);
  background-repeat: repeat-x;
  border-right: 1px solid #000;
  border-left: 1px solid #222222;
}

nav#navigation_secondary ul li a:hover {
  background: #d28c17;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #d28c17;
  margin: 0px;
}

.panel {
  border: 1px solid #333333;
  padding: 8px;
  overflow: auto;
}

input {
  width: 100%;
  padding: 8px;
  background: #111111;
  border: 1px solid #222222;
  margin-top: 24px;
  color: #666;
}

table {
  margin: 16px 0px;
}

table tr td {
  background: #111111;
  padding: 8px;
}

main {
  background: pink;
  overflow-y: auto;
  margin: 16px;
  float: left;
  width: calc(85% - 33px);
  max-height: calc(100% - 66px - 32px);
}

.row [class^="col-"]:first-child {
  margin-left: 0;
  padding-left: 0;
}

.row [class^="col-"]:last-child {
  margin-right: 0;
  padding-right: 0;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 8px;
  padding-left: 8px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  overflow: auto;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

<div id="container-outer">
  <div id="logo">Logo Here</div>
  <div id="container-inner">
    <nav id="navigation_primary">
      <h3>Nav Title</h3>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <nav id="navigation_secondary">
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <main>
      <div class="row">
        <div class="col-12">
          <div class="panel">
            <h3>Heading</h3>
            <table align="center" width="100%" cellspacing="1" cellpadding="5">
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
              <tr>
                <td><a href="#">link</a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

【讨论】：

【解决方案3】：

#container-inner {
  border: 1px solid #333333;
  overflow: hidden;
  position: fixed;
  top: 130px;
  left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 130px - 32px);
}

你想要overflow: auto;。 hidden 表示无论如何都会隐藏。

【讨论】：

container-inner 类未在他的内容区域中使用。看看 JSFiddle。

【解决方案4】：

因为你需要改变你的身高，所以我冒昧地改变了其中一个：

 height: 1000px;

Jsfiddle

【讨论】：

【解决方案5】：

这是因为你的main 类没有固定的height，只有一个min-height。容器需要固定大小才能有溢出的内容。

注意：overflow 属性只对指定高度的块元素有效。

来源：https://www.w3schools.com/cssref/pr_pos_overflow.asp

你的 CSS 应该是什么样子

   .main {
      background: pink;
      overflow-y: auto;
      margin: 16px;
      padding: 0;
      float: left;
      width: calc(85% - 33px);
      height: 85%;
    }

【讨论】：