CODEWITHSUNDEEP
csshtmloverflow
leofontes
leofontes

Reputation: 927

Make just one section scrollable, not the entire page

I am working on a project in which one of the sections is filled with elements by requesting data from the database, therefore the number of elements in it is extremely variable.

The tricky part is that our design is based on the idea of not having to scroll on the page, but instead scroll on the sections if it is necessary. I thought using overflow on the sections would suffice but it does not give me the intended result.

I tried all of the variations of the overflow property, scroll displays a scroll bar but it seems to be frozen.

How can I make section-one scrollable within itself, without making the rest of the page scrollable?

I created a code pen with a dummy version to demonstrate the problem: http://codepen.io/leofontes/pen/aNaBox

body {
  overflow: hidden;
}

main {
  margin: 0;
  width: 100%;
  height: 100%;
}

.section-one {
  background-color: #FF0000;
  float: left;
  min-height: 1400px;
  overflow: visible;
  width: 15%;
}

.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}

.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}
<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>
</main>

Thank you

Upvotes: 8

Views: 15872

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Make these adjustments to your CSS:

html {
  height: 100%;                       /* note #1 */
}
body {
  height: 100%;                       /* note #1 */
  margin: 0;                          /* note #2 */
  overflow: hidden;
}
main {
  margin: 0;
  height: 100%;
}
.section-one {
  background-color: #FF0000;
  float: left;
  overflow-y: auto;                  /* new */
  width: 15%;
  height: 100%;                      /* note #3 */
}
.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}
.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}
<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>

</main>

Revised Codepen

Notes:

  1. When using percentage heights, parent elements must have a specified height.
  2. Remove the default margin from the body element.
  3. Adding a height to the element causes the overflow to work.

Upvotes: 9

Related Questions