0

I'd like to make scrollable only the "content" div. But in the following code it produces two scrolls, one over the body and other over the "content" div. I would expect that only the "content" div will be scrollable.

body {
  margin: 0px;
}

.header {
  position: fixed;
  background-color: #ccc;
  width: 100%;
  height: 70px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.menu {
  position: fixed;
  top: 70px;
  width: 300px;
  height: 400px;
  background-color: yellow;
}

.content {
  position: absolute;
  left: 300px;
  top: 70px;
  height: 100%;
  overflow-y: scroll;
  background-color: lightblue
}
<div class="header">HEADER</div>
<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="content">CONTENT
    <section>
      <h2>Lorem ipsum</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum
      morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et
      netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
      <h2>Lorem ipsum</h2>
      Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate
      ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus
      nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
      <h2>Lorem ipsum</h2>
      Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin
      ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie
      nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
      <h2>Lorem ipsum</h2>
      Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget.
      Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi
      non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus
      a pellentesque sit amet porttitor eget.
      <h2>Lorem ipsum</h2>
      Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus
      turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien.
      Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
    </section>
  </div>
</div>

Improve this question
2
  • 1
    provide an overflow: hidden; on body in your css. This should help in this case. Commented Sep 18, 2018 at 14:18
  • Take your time review all the answers I suggest, As vh + flex + calc doesn't sound so pleasant to me. Commented Sep 18, 2018 at 14:47

5 Answers 5

Reset to default
2

One way is to apply:

body {
  overflow: hidden;
}

Another way is to set:

.content {
  position: fixed; /* rather than absolute */
  ...
}

But I'd use flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  background-color: #ccc;
  height: 70px;
}

.wrapper {
  flex: 1;
  display: flex;
}

.menu {
  flex: 0 0 300px;
  max-height: 400px;
  background-color: yellow;
}

.content {
  flex: 1;
  overflow-y: auto;
  background-color: lightblue;
}
<div class="header">HEADER</div>
<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="content">CONTENT
    <section>
      <h2>Lorem ipsum</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum
      morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et
      netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
      <h2>Lorem ipsum</h2>
      Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate
      ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus
      nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
      <h2>Lorem ipsum</h2>
      Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin
      ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie
      nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
      <h2>Lorem ipsum</h2>
      Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget.
      Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi
      non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus
      a pellentesque sit amet porttitor eget.
      <h2>Lorem ipsum</h2>
      Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus
      turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien.
      Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
    </section>

  </div>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much, almost what I wanted, only that it scrolls with the header (true I didn't specifically said that). At least an upvote then. Thanks again!!
1

is this what you are Looking for?

body {
  margin: 0px;
  height: 100vh;
}

.header {
  background-color: #ccc;
  width: 100%;
  height: 70px;
}

.wrapper {
  display: flex;
  height: calc(100% - 70px);
  width: 100%;
}

.menu {
  width: 600px;
  height: 100%;
  background-color: yellow;
}

.content {
  height: 100%;
  overflow-y: auto;
  background-color: lightblue
}
<div class="header">HEADER</div>
<div class="wrapper">
<div class="menu">MENU</div>
<div class="content">CONTENT
<section>
<h2>Lorem ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
<h2>Lorem ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
<h2>Lorem ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
<h2>Lorem ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
<h2>Lorem ipsum</h2>
Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
<h2>Lorem ipsum</h2>
Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
<h2>Lorem ipsum</h2>
Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget.
<h2>Lorem ipsum</h2>
Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
</section>

</div>
  
</div>

Improve this answer

Comments

0

This worked for me:

CSS:

body {
        margin: 0px;
        overflow: hidden;
    }

    .header {
        position: fixed;
        background-color: #ccc;
        width: 100%;
        height: 70px;
    }

    .wrapper {
        width: 100%;
        height: 100%;
    }

    .menu {
        position: fixed;
        top: 70px;
        width: 300px;
        height: 400px;
        background-color: yellow;
    }

    .content {
        position: absolute;
        left: 300px;
        top: 70px;
        height: 100%;
        overflow-y: scroll;
        background-color: lightblue
    }

I didn't change the HTML much, just made sure that I had enough content.

Improve this answer

2 Comments

Hi, thanks I have tried that property before, but it hides the content at the bottom...
@elkarel that's weird, I did it in latest chrome for macOS btw, maybe that has something to do with it?
0

Try this ....

body {
  margin: 0px;
  overflow:hidden;
}

.header {
  position: fixed;
  background-color: #ccc;
  width: 100%;
  height: 70px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.menu {
  position: fixed;
  top:70px;
  width: 300px;
  height: 400px;
  background-color: yellow;
}

.content {
  position: absolute;
  left: 300px;
  top: 70px;  
  height: 100%;
  overflow-y: auto;
  background-color: lightblue
}
<div class="header">HEADER</div>
<div class="wrapper">
<div class="menu">MENU</div>
<div class="content">CONTENT
<section>
<h2>Lorem ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor consequat id porta nibh venenatis cras sed. Eu consequat ac felis donec et. Nulla porttitor massa id neque aliquam vestibulum morbi. Viverra nam libero justo laoreet sit amet cursus. Feugiat in ante metus dictum. Feugiat vivamus at augue eget arcu dictum varius duis. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. At ultrices mi tempus imperdiet. Et netus et malesuada fames ac. Lectus quam id leo in vitae turpis.
<h2>Lorem ipsum</h2>
Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis mauris sit. Quam nulla porttitor massa id. Nascetur ridiculus mus mauris vitae ultricies. Viverra maecenas accumsan lacus vel. Justo donec enim diam vulputate ut pharetra sit amet aliquam. A erat nam at lectus urna duis. Nibh tortor id aliquet lectus proin nibh. Tempor commodo ullamcorper a lacus vestibulum sed. Egestas sed tempus urna et pharetra pharetra massa. Sit amet purus gravida quis. Quis lectus nulla at volutpat diam ut. Pulvinar neque laoreet suspendisse interdum consectetur. Tellus integer feugiat scelerisque varius. Dui ut ornare lectus sit amet est placerat in. Lorem dolor sed viverra ipsum nunc. At lectus urna duis convallis.
<h2>Lorem ipsum</h2>
Tellus molestie nunc non blandit massa enim nec dui. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nam aliquam sem et tortor consequat. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Neque gravida in fermentum et sollicitudin ac orci phasellus. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Elementum facilisis leo vel fringilla est ullamcorper. Sit amet cursus sit amet dictum sit amet justo donec.
<h2>Lorem ipsum</h2>
Lobortis feugiat vivamus at augue eget. Sollicitudin tempor id eu nisl nunc. Arcu odio ut sem nulla pharetra diam sit amet nisl. At lectus urna duis convallis convallis tellus id interdum. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Venenatis tellus in metus vulputate eu scelerisque felis. Mi proin sed libero enim sed faucibus turpis. Nam at lectus urna duis convallis. Auctor augue mauris augue neque gravida in. Arcu felis bibendum ut tristique. Amet porttitor eget dolor morbi non arcu risus. Bibendum neque egestas congue quisque egestas diam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Leo urna molestie at elementum eu facilisis sed odio. In hac habitasse platea dictumst. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget.
<h2>Lorem ipsum</h2>
Varius vel pharetra vel turpis nunc eget lorem. Integer feugiat scelerisque varius morbi enim nunc faucibus. Sed adipiscing diam donec adipiscing tristique risus nec. Sagittis eu volutpat odio facilisis mauris sit amet. Mauris ultrices eros in cursus turpis massa tincidunt. Ullamcorper velit sed ullamcorper morbi. Enim lobortis scelerisque fermentum dui faucibus. Augue eget arcu dictum varius duis at consectetur. Vel quam elementum pulvinar etiam non. Eleifend donec pretium vulputate sapien. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Et sollicitudin ac orci phasellus egestas tellus rutrum. Congue quisque egestas diam in arcu cursus euismod quis. Etiam non quam lacus suspendisse.
</section>

</div>
  
</div>

Improve this answer

Comments

0

I have also found adding a specific height to the div helps:

body { 
  height: 200vh;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.