CODEWITHSUNDEEP
htmlcss
ShoeLace1291
ShoeLace1291

Reputation: 4698

Why are my scrollbars not appearing?

I am desining a template that has a header with a logo on the top, and a container. In the container is a vertical navigation menu on the left side, a horizontal nav menu on top, and a content area in the remaining container space. I want the vertical nav menu to have a scrollbar(working) and the content area to have a scrollbar(not working). I don't want a scroll bar on the horizontal nav menu. The entire inner container is fixed which is why I want the scrollbars. Why are the scrollbars not showing? In the jsFiddle, the pink area should have the vertical scrollbars.

Here is a jsFiddle.

This is my 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>

Upvotes: 0

Views: 95

Answers (5)

Jose Paredes
Jose Paredes

Reputation: 4090

The main element will increase its size for every child it has and #container-inner will overflow the size of main, therefore, main will never have the scroll because it doesn't have a max-height.

Solution

Fix the height of main to:

  • #container-inner - #navigation_secondary - margin of main (top and bottom 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>

Upvotes: 0

Jesse
Jesse

Reputation: 3642

It's because your main class has no fixed height, only a min-height. A container needs a fixed size in order to have overflowing content.

Note: The overflow property only works for block elements with a specified height.

Source: https://www.w3schools.com/cssref/pr_pos_overflow.asp

How your CSS should look

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

Upvotes: 0

Liaqat Saeed
Liaqat Saeed

Reputation: 428

you scroll are not appearing because you are using min-height here which will never allow overflow:scroll use height:100% instead here

you Problem

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

my solution 

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

Updated Fiddle

Upvotes: 1

user8749048
user8749048

Reputation:

it because you needed to change your height i took liberty of changing one of them by using:

 height: 1000px;

Jsfiddle

Upvotes: 0

Cfreak
Cfreak

Reputation: 19319

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

You want overflow: auto;. hidden means it will always be hidden no matter what.

Upvotes: 0

Related Questions