Incorporating a scrollbar when a div exceeds the bottom of the viewport

Question

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights:

<html>
<head></head>
<body>

<div>
  <table>
     <tr>...
     <tr>...
     ...
  </table>
</div>

</body>
</html>

Currently, when the content in the table is long enough, the div extends beyond the bottom of the page viewport. I want to prevent the div from extending below the bottom of the page and instead add a scroll bar. I can easily add scroll bars if the div height is fixed using overflow: scroll. However, I need the div height to adjust based on the user's browser window size.

Does anyone have any suggestions for achieving this? It is not necessary for the div to extend all the way to the bottom of the page if there is no table content. I would prefer a pure CSS solution rather than resorting to JavaScript to set the div height dynamically.

Thank you!

css scrollbar html

Answer 1

Answer №1

How about utilizing a wrapper with overflow auto and some clever 100% manipulation? For example, consider this variation:

<!DOCTYPE HTML> 
<html lang="en-US> 
    <head> 
        <meta charset="utf-8/> 
        <title>The Power of 100%</title> 
        <style> 
          * {
            margin: 0;
            padding: 0;
          }
          html, body {
            height: 100%;
            overflow: hidden;
          }
          #wrapper {
            height: 100%;
            width: 200px;
            overflow: auto;
          }
        </style> 
    </head> 
    <body> 
        <div id="wrapper"> 
            <div id="content"> 
                <p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name... (text continues)
<p> 
I had seen little of Holmes lately... (text continues) 
One night&#8212;it was on the twentieth of March, 1888&#8212;I was
returning from a journey to a patient... (text continues)
<p> 
His rooms were brilliantly lit... (text continues) 
He was pacing the room swiftly... (text continues) 
I rang the bell and was shown up to the chamber which
had formerly been in part my own.
            </div> 
        </div> 
    </body> 
</html>

View a live demo on jsFiddle.

Answer 2

How about utilizing a wrapper with overflow auto and some clever 100% manipulation? For example, consider this variation:

<!DOCTYPE HTML> 
<html lang="en-US> 
    <head> 
        <meta charset="utf-8/> 
        <title>The Power of 100%</title> 
        <style> 
          * {
            margin: 0;
            padding: 0;
          }
          html, body {
            height: 100%;
            overflow: hidden;
          }
          #wrapper {
            height: 100%;
            width: 200px;
            overflow: auto;
          }
        </style> 
    </head> 
    <body> 
        <div id="wrapper"> 
            <div id="content"> 
                <p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name... (text continues)
<p> 
I had seen little of Holmes lately... (text continues) 
One night&#8212;it was on the twentieth of March, 1888&#8212;I was
returning from a journey to a patient... (text continues)
<p> 
His rooms were brilliantly lit... (text continues) 
He was pacing the room swiftly... (text continues) 
I rang the bell and was shown up to the chamber which
had formerly been in part my own.
            </div> 
        </div> 
    </body> 
</html>

View a live demo on jsFiddle.

Answer 3

Answer №2

Create a stylish CSS class for a scrolling Div

.CustomScrollableDiv {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}
.DivWithScroll {
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}

Answer 4

Create a stylish CSS class for a scrolling Div

.CustomScrollableDiv {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}
.DivWithScroll {
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}

Incorporating a scrollbar when a div exceeds the bottom of the viewport

Answer №1

Answer №2

Similar questions

Vertical centering menu adjustment

Office Outlook Client experiencing incorrect div width

The performance of Jquery Animate is acting strangely after the upgrade to version 1.11

Getting form field values with JQuery

create a miniature display featuring text and visuals using HTML

Retrieve the total count of tables within a specific div element

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

Refresh the CSS inheritance and hover effects

I am interested in utilizing css to establish an iframe as a background

What is the best way to split two divs in this manner?

What is preventing my boolean from being altered?

PHP code for uploading multiple images at once

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Is there a way to remove CSS based on the generated HTML code?

Updating React JSX class based on certain conditions without manipulating the actual DOM

What is the Best Way to Create a Smooth Border-Bottom Transition?

Verify the presence of both class and id before modifying the content of the h1 tag and automatically redirecting the page

The value of the comment box with the ID $(CommentBoxId) is not being captured

Having trouble with CSS transitions not showing up correctly in Chrome. Any suggestions on how to resolve this issue?