Html Question posted in
Some basic documentation can be found here.

How do I make my HTML div truly scroll vertically?

I am trying to create a scheduler application for myself and for the hourly view (when a specific date is selected), I want all 24 hours there but each "block" is supposed to be 4em. I doubt that will all fit on the screen – In fact the height of each div seems to get smaller as I put more divs in the container. Is there another CSS tag I’m forgetting to include and if so, what values could/should I consider using for it to get what I’m trying to accomplish? Here’s the source for the hourly view div and container:

.hourBlock {
  border: 1px solid black;
  font-size: .75em;
  height: 10em;
  width: 100%;
}

.hourBlockText {
  left: .25em;
  text-align: left;
  top: .05em;
}
<div style="display: flex; flex-direction: column; gap: 0px;height: 100%;margin-top: 5px;overflow-y: auto;width: 100%;">
  <div class="hourBlock"><span class="hourBlockText">12:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">1:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">2:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">3:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">4:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">5:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">6:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">7:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">8:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">9:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">10:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">11:00 AM</span></div>
  <div class="hourBlock"><span class="hourBlockText">12:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">1:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">2:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">3:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">4:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">5:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">6:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">7:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">8:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">9:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">10:00 PM</span></div>
  <div class="hourBlock"><span class="hourBlockText">11:00 PM</span></div>
</div>

The hourBlock class CSS is inside a media so on dark mode systems it shows in black background with white font color and on light mode it shows up as white background with black font color but to show both and the media stuff would be a waste of space and useless. I can’t have just light mode stuff as I have vision problems and white screens are entirely blurry to me – all I see is white blinding light so I included only the dark mode themed version but the only difference is the background and foreground colors.

Before people question about the 100% height and width, how do I otherwise determine the remaining height and width of the page/screen then – and I’ve tried it with 50% and with a px value and it doesn’t seem to change much other than it is smaller, there’s a scrollbar but it won’t scroll – it just smooshes the entire contents into a smaller space.

I also tried looking for some CSS that might prevent turn off scrolling somehow. I don’t see anything – I can put my CSS in but it’s for the entire page, not just that one div. I’ve put this div in its own page to the same effect – which makes sense because 100% height and width is a lot more space – I’m trying to fill the right maybe 2/3 of the screen width here as opposed to 100% and 90% of the height – so I feel confident something in this is causing the issue – I’m either missing something or have something in here that causes it.

Tags:

2

Answers


  1. 0

    It seems like the issue you’re encountering is related to the height of each "block" becoming smaller as more divs are added to the container. If you want each block to have a fixed height of 4em, and you anticipate that all 24 hours won’t fit on the screen, you might be experiencing overflow issues.

    To address this, you can modify the container’s styles to allow vertical scrolling. Additionally, consider adjusting the height of the container to accommodate the total height of all the blocks. Here’s an example modification:

    CSS CODE:

    .hourlyContainer {
    display: flex;
    flex-direction: column;
    gap: 0px;
    height: 20em; /* Set a fixed height that accommodates all 24 hours */
    margin-top: 5px;
    overflow-y: auto; /* Enable vertical scrolling */
    width: 100%;
}

   .hourBlock {
    border: 1px solid black;
    font-size: 0.75em;
    height: 4em; /* Fixed height for each block */
    width: 100%;
}

   .hourBlockText {
    left: 0.25em;
    text-align: left;
    top: 0.05em;
}
    Login or Signup to reply.
  2. 0

    The issue is due to the combination of the height: 100% on the container and the fixed height of each .hourBlock. When you have a fixed height for each block and set the container height to 100%, the total height exceeds the viewport height, causing the scrollbar and making the content appear compressed.

    So I would suggest you set the height of your container like 80vh or 90vh whatever works for you. And then let the .hourBlock take its own space.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search