Issue with overflow:scroll displaying incomplete div contents

I am attempting to create a sidebar with a fixed position, featuring a small header and a scrollable content area below it.

The issue I am facing is that I am unable to scroll through the entire content within the div, resulting in some parts being cut off.

Here is my code snippet and you can also view it on jsfiddle.

HTML

<section>
<header>Some text here
    <br>Few lines of content
    <br>Does not matter
    <br>
</header>
<div class="scroll-box">FIRST LINE
    ...
    <br>LAST LINE
    <br>
</div>

CSS

    section {
    position: fixed;
    top:0;
    left: 0;
    height: 100%;
    width: 300px;
    background: red;
}
.scroll-box {
    overflow: scroll;
    height: 100%;
    width: 100%;
    background: #eee;
}

Thank you

htmlcss

Answer №1

The problem lies here:

.scroll-box {
   height:100%;
}

Attempting to set the height to 100% is not ideal as there is a header in the section that also requires space.

A better approach would be to distribute the total 100% among the header and the .scroll-box

section header{
  height:30%;
}
.scroll-box {
  overflow: auto;
  height:70%;
  background: #eee;
}

Check out the demo http://jsfiddle.net/9V45d/8/

Answer №2

The size of the scroll box with the class "scroll-box" is currently set to 100% of the screen, but due to the header taking up space on the page, the scroll area is being cropped.

To resolve this issue, you can update the CSS to:

.scroll-box {
    overflow: scroll;
    height: 91%;
    width: 100%;
    background: #eee;
}

By adjusting the height to 91%, you will be able to view the entire scroll box and all its contents. This way, you can effectively distribute the space between the header and the scroll area.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize jQuery to extract the content, rearrange the content, and then encapsulate it within fresh

I attempted all day to rearrange this menu the way I want, but since I am new to jQuery, I'm facing some challenges. Here is what I am currently trying to achieve: Inside the last td.top of this menu, there are 3 ul.sub li items. I aim to extract ...

javascriptjqueryhtmlcss

What is the most effective approach to seamlessly conceal and reveal a button with the assistance

I have two buttons, one for play and one for pause. <td> <?php if($service['ue_status'] == "RUNNING"){ $hideMe = 'd-none'; } ?> <a href="#" class="btn btn-warning ...

javascriptjqueryhtmlcsslaravel-blade

Ways to align a DIV in the center of another DIV?

I am currently working on building a footer. My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this? Demo: http://jsfiddle.n ...

htmlcssfooter960.gs

Show a table with rows that display an array from a JSON object using JavaScript

My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...

javascripthtmljson

Adjustable Pop-up Modal

I am attempting to implement a resizable modal window feature by utilizing increase and decrease icons. Additionally, I aim to have the modal centered on the screen following each click of increase/decrease. Thus far, only the increase functionality is fu ...

jqueryhtmlangularjstwitter-bootstrapbootstrap-modal

Creating a hover effect for displaying image masks

My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal. How ...

javascriptjquerycss

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

javascriptjqueryhtmldraggable

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

htmlcssscrolloverflowparent-child

Tips for preventing tiny separation lines from appearing above and below unordered list elements

I am attempting to utilize twitter bootstrap to create a select-option style list. How can I eliminate the thin separation lines above and below the list of items? Refer to the screenshot: https://i.sstatic.net/1khEE.png Below is the visible code snippe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Create another div for the remaining vertical space occupied by the sibling div?

I currently have 3 different divs nested within each other: <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> Here is the current CSS styling applied to these divs: .a { hei ...

htmlcss

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

When using these two files, only one of them can work on a page. <script src="jquery.min.js"></script> <script src="jquery-1.min.js"></script>//Only the second one works Alternatively, if the order is changed: <script src="jq ...

javascriptjqueryhtml

Having trouble uploading an image of a varchar type from my MySQL database. Any ideas on how to fix this issue?

Currently, my PHP server is hosted on 000webhost and I am using phpMyAdmin for the database. The structure of my image row in the database table is as follows: image varchar(100) utf8_unicode_ci I am attempting to create a functionality where a user ...

phphtmlmysqldatabaseimage

Adding Breathable Space Between Wrapper and Div Elements

Hello everyone! I am new to the world of web design and this is my first big project. Please bear with me if my code is a bit messy. I need help in reducing the space between my main content area/wrapper and footer to about 20px. Any experts familiar with ...

phphtmlcss

Image overlaying the full width of body content background

I am trying to find a solution to my problem, but so far no luck. The Body selector has a max-width of 85%, and there are other selectors like header which I want to have a background image that spans 100% of the width behind the body selector attribute. ...

cssbackground-image

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...

htmlcss

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

pythonhtmldjango

Analyzing user input in PHP against a mysqli database

I'm currently working on an online quiz application. I have everything in place with the form, and it's successfully sending emails to the administrator. However, there's a specific functionality that I want to implement: I need the script ...

phphtmlmysqlcsstesting

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss

Encircle a circle within the Progress Tracker

Is there a way to create a ring around the circle in this progress tracker, similar to the image shown here? The progress tracker is based on You can view an example here. The CSS approach used was: .progress-step.is-active .progress-marker { backgrou ...

cssflexbox