What is the best way to implement a scrolling effect for a specific div tag using CSS?

Question

What is the best way to implement a scrolling effect for a specific div tag using CSS?

I am facing an issue with scrolling a specific div tag, it seems to not be working as expected.

<body style="margin:0; padding:0;">
<div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; ">
<div id="header">
<h1>Header</h1>
</div>
<div id="headcontent" style="height:20%; widht:100%; background:orange;"> 
<h4>Header content</h4>
</div>
</div>
<div id="content" style="width:100%; height:250%; background:pink; overflow-y:scroll; ">
</div>
</body>

I specifically want to scroll only the content tag. However, due to using position:fixed in the head tag, I am unable to do so. How can I achieve scrolling for just the content tag? I have also attempted using

<body style="margin:0; padding:0; overflow-y:hidden">

but it does not seem to work. How can this be resolved?

html css

Answer 1

Answer №1

Everything is looking good in your code..

All you need to do is replace

height:250% with height: 250px; or any % value you require

Below is the complete working solution...

<style type="text/css">
.scroll-my-div {
    background: none repeat scroll 0 0 pink;
    height: 250px;
    overflow-y: scroll;
    width: 100%;
}
</style>


<body style="margin:0; padding:0;">

<div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; ">

<div id="header">
<h1>Header</h1>
</div>

<div id="headcontent" style="height:20%; widht:100%; background:orange;">
<h4>Header content</h4>
</div>

</div>

<div id="content" class="scroll-my-div"> 
Lorem Ipsum...
...
...
(injected humour and the like).
</div>

</body>

Answer 2

Everything is looking good in your code..

All you need to do is replace

height:250% with height: 250px; or any % value you require

Below is the complete working solution...

<style type="text/css">
.scroll-my-div {
    background: none repeat scroll 0 0 pink;
    height: 250px;
    overflow-y: scroll;
    width: 100%;
}
</style>


<body style="margin:0; padding:0;">

<div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; ">

<div id="header">
<h1>Header</h1>
</div>

<div id="headcontent" style="height:20%; widht:100%; background:orange;">
<h4>Header content</h4>
</div>

</div>

<div id="content" class="scroll-my-div"> 
Lorem Ipsum...
...
...
(injected humour and the like).
</div>

</body>

Answer 3

Answer №2

When applying a percentage height to a div, it may not take effect as expected. To ensure the height is applied properly, consider using a set pixel height along with the percentage.

<body style="margin:0; padding:0;">
  <div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; ">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="headcontent" style="height:20%; widht:100%; background:orange;">
      <h4>Header content</h4>
    </div>
  </div>
  <div id="content" style="width:100%; height:250px; background:pink; overflow-y:scroll; ">
    <h1>Bender Gets Made</h1> 
    <p>Your best is an idiot! You guys go on without me! I'm going to go&hellip; look for more stuff to steal! You mean while I'm sleeping in it? And from now on you're all named Bender Jr. Michelle, I don't regret this, but I both rue and lament it.</p>
    <h2>Love and Rocket</h2> 
    <p>Who am I making this out to? You lived before you met me?! Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase.</p>
    <ul>
      <li>Say what?</li>
      <li>Ow, my spirit!</li>
      <li>Five hours? Aw, man! Couldn't you just get me the death penalty?</li>
    </ul>
    <h3>Bend Her</h3> 
    <p>As an interesting side note, as a head without a body, I envy the dead. Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.
      She also liked to shut up! Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
    <h4>Lethal Inspection</h4> 
    <p>Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. Ow, my spirit! A true inspiration for the children. Yeah, I do that with my stupidness. Switzerland is small and neutral! We are more like Germany, ambitious
      and misunderstood! Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal?</p>
    <ol>
      <li>File not found.</li>
      <li>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</li>
    </ol>
    <h5>Lesser of Two Evils</h5> 
    <p>Five hours? Aw, man! Couldn't you just get me the death penalty? Bender, I didn't know you liked cooking. That's so cute. Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? OK, this has gotta stop. I'm going to
      remind Fry of his humanity the way only a woman can. In our darkest hour, we can stand erect, with proud upthrust bosoms. Yes, I saw. You were doing well, until everyone died.</p>
    <h6>Crimes of the Hot</h6> 
    <p>You've killed me! Oh, you've killed me! Professor, make a woman out of me. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff! Hey, guess what you're accessories to.</p>
    <p>And why did 'I' have to take a cab? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old
      man. Well, then good news! It's a suppository. Fry, we have a crate to deliver.</p>
    <p>In our darkest hour, we can stand erect, with proud upthrust bosoms. Please, Don-Bot&hellip; look into your hard drive, and open your mercy file! Hey, guess what you're accessories to. Uh, is the puppy mechanical in any way? You can crush me but you
      can't crush my spirit!</p>
    <p>There's one way and only one way to determine if an animal is intelligent. Dissect its brain! I can explain. It's very valuable. Calculon is gonna kill us and it's all everybody else's fault! Anyhoo, your net-suits will allow you to experience Fry's
      worm infested bowels as if you were actually wriggling through them. Why would I want to know that? OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can.</p>
    <p>Who are you, my warranty?! And then the battle's not so bad? Shinier than yours, meatbag. Say what? I can explain. It's very valuable.</p>
    <p>Why, those are the Grunka-Lunkas! They work here in the Slurm factory. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing
      where they are. Can I use the gun? Good news, everyone! I've taught the toaster to feel love!</p>
    <p>You don't know how to do any of those. No, of course not. It was&hellip; uh&hellip; porno. Yeah, that's it. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep.</p>
    <p>Yeah, I do that with my stupidness. I can explain. It's very valuable. And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet.</p>
    <p>Daylight and everything. WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! For the last time, I don't like lilacs! Your 'first' wife was the one who liked lilacs! No. We're on the top. Hey! I'm a porno-dealing monster, what do I care what you think? I videotape
      every customer that comes in here, so that I may blackmail them later.</p>
    <p>Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Soothe us with sweet lies. I suppose I could part with 'one' and still be feared&hellip;
      Tell them I hate them.</p>
    <p>Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. What's with you kids? Every other day it's food, food, food. Alright, I'll get you some stupid food. Kids don't turn rotten just from watching TV. Whoa a real live robot;
      or is that some kind of cheesy New Year's costume?</p>
    <p>Can I use the gun? What are their names? Wow, you got that off the Internet? In my day, the Internet was only used to download pornography. I never loved you. Yes. You gave me a dollar and some candy.</p>
    <p>File not found. How much did you make me? I don't want to be rescued.</p>
    <p>Oh, I think we should just stay friends. Why am I sticky and naked? Did I miss something fun? Now what?</p>
    <p>No! The cat shelter's on to me. Oh no! The professor will hit me! But if Zoidberg 'fixes' it&hellip; then perhaps gifts! And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of
      God, don't not do it! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
  </div>
</body>

Answer 4

When applying a percentage height to a div, it may not take effect as expected. To ensure the height is applied properly, consider using a set pixel height along with the percentage.

<body style="margin:0; padding:0;">
  <div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; ">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="headcontent" style="height:20%; widht:100%; background:orange;">
      <h4>Header content</h4>
    </div>
  </div>
  <div id="content" style="width:100%; height:250px; background:pink; overflow-y:scroll; ">
    <h1>Bender Gets Made</h1> 
    <p>Your best is an idiot! You guys go on without me! I'm going to go&hellip; look for more stuff to steal! You mean while I'm sleeping in it? And from now on you're all named Bender Jr. Michelle, I don't regret this, but I both rue and lament it.</p>
    <h2>Love and Rocket</h2> 
    <p>Who am I making this out to? You lived before you met me?! Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase.</p>
    <ul>
      <li>Say what?</li>
      <li>Ow, my spirit!</li>
      <li>Five hours? Aw, man! Couldn't you just get me the death penalty?</li>
    </ul>
    <h3>Bend Her</h3> 
    <p>As an interesting side note, as a head without a body, I envy the dead. Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.
      She also liked to shut up! Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
    <h4>Lethal Inspection</h4> 
    <p>Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. Ow, my spirit! A true inspiration for the children. Yeah, I do that with my stupidness. Switzerland is small and neutral! We are more like Germany, ambitious
      and misunderstood! Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal?</p>
    <ol>
      <li>File not found.</li>
      <li>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</li>
    </ol>
    <h5>Lesser of Two Evils</h5> 
    <p>Five hours? Aw, man! Couldn't you just get me the death penalty? Bender, I didn't know you liked cooking. That's so cute. Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? OK, this has gotta stop. I'm going to
      remind Fry of his humanity the way only a woman can. In our darkest hour, we can stand erect, with proud upthrust bosoms. Yes, I saw. You were doing well, until everyone died.</p>
    <h6>Crimes of the Hot</h6> 
    <p>You've killed me! Oh, you've killed me! Professor, make a woman out of me. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff! Hey, guess what you're accessories to.</p>
    <p>And why did 'I' have to take a cab? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old
      man. Well, then good news! It's a suppository. Fry, we have a crate to deliver.</p>
    <p>In our darkest hour, we can stand erect, with proud upthrust bosoms. Please, Don-Bot&hellip; look into your hard drive, and open your mercy file! Hey, guess what you're accessories to. Uh, is the puppy mechanical in any way? You can crush me but you
      can't crush my spirit!</p>
    <p>There's one way and only one way to determine if an animal is intelligent. Dissect its brain! I can explain. It's very valuable. Calculon is gonna kill us and it's all everybody else's fault! Anyhoo, your net-suits will allow you to experience Fry's
      worm infested bowels as if you were actually wriggling through them. Why would I want to know that? OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can.</p>
    <p>Who are you, my warranty?! And then the battle's not so bad? Shinier than yours, meatbag. Say what? I can explain. It's very valuable.</p>
    <p>Why, those are the Grunka-Lunkas! They work here in the Slurm factory. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing
      where they are. Can I use the gun? Good news, everyone! I've taught the toaster to feel love!</p>
    <p>You don't know how to do any of those. No, of course not. It was&hellip; uh&hellip; porno. Yeah, that's it. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep.</p>
    <p>Yeah, I do that with my stupidness. I can explain. It's very valuable. And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet.</p>
    <p>Daylight and everything. WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! For the last time, I don't like lilacs! Your 'first' wife was the one who liked lilacs! No. We're on the top. Hey! I'm a porno-dealing monster, what do I care what you think? I videotape
      every customer that comes in here, so that I may blackmail them later.</p>
    <p>Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Soothe us with sweet lies. I suppose I could part with 'one' and still be feared&hellip;
      Tell them I hate them.</p>
    <p>Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. What's with you kids? Every other day it's food, food, food. Alright, I'll get you some stupid food. Kids don't turn rotten just from watching TV. Whoa a real live robot;
      or is that some kind of cheesy New Year's costume?</p>
    <p>Can I use the gun? What are their names? Wow, you got that off the Internet? In my day, the Internet was only used to download pornography. I never loved you. Yes. You gave me a dollar and some candy.</p>
    <p>File not found. How much did you make me? I don't want to be rescued.</p>
    <p>Oh, I think we should just stay friends. Why am I sticky and naked? Did I miss something fun? Now what?</p>
    <p>No! The cat shelter's on to me. Oh no! The professor will hit me! But if Zoidberg 'fixes' it&hellip; then perhaps gifts! And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of
      God, don't not do it! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
  </div>
</body>

What is the best way to implement a scrolling effect for a specific div tag using CSS?

Answer №1

Answer №2

Similar questions

Using jQuery and Ajax to populate a dropdown menu with options

Tips for incorporating jQuery val() into a span element!

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

Troubleshooting: Issue with displaying PHP data on an AngularJS table using JSON through jQuery AJAX

What is the best way to retrieve the value of an object in PHP?

Prevent Repetition of Meta Descriptions and Keywords within Next.js

Update data dynamically on a div element using AngularJS controller and ng-repeat

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

I'm having trouble getting the code to work properly after the "else" statement using both jQuery and Javascript. My head is

Maintain parental visibility with children when navigating to a different page

Retrieve information from api and showcase it in html

What is the correct way to integrate `$locationProvider.html5Mode(true);` into my code

Using CSS to cut out a triangle shape from an image

Steps for identifying the file format of a document with JavaScript

Mastering the integration of Sass with NextJS

How can I eliminate hyperlinks from entire cells within a table using CSS and HTML?

Placing an order and obtaining the associated reservation_id through the use of SQL, PHP, and an html5 form

I am having issues with my Django application where I am unable to check

The text size in Google Chrome always stays consistent across the page

jQuery Hide function malfunctions when the contents of divs are sorted