为什么我的滚动条没有出现？

Question

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

这是jsFiddle。

这是我的CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你滚动没有出现，因为你在这里使用 min-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

Answer 2

这是因为您的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%;
    }

Answer 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意味着无论如何都会隐藏它。

Answer 4

因为你需要改变你的身高我可以通过使用以下方式自由改变其中一个：

 height: 1000px;

Jsfiddle

Answer 5

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>