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

execute php function when form is submitted

How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

continuously repeating css text animation

Attempting to utilize Bootstrap for containing text inside of a background

Get rid of all the formatting on an HTML button or submit

Designing HR components using Bootstrap and CSS

The Elusive Solution: Why jQuery's .css() Method Fails

Tips for using a unique format for a single field in jqGrid

Exploring HTML5 using QXmlQuery

Issue with AJAX MVC HTML: jQuery value is not blocking API call

Customize Link Appearance Depending on Current Section

JavaScript fails to focus on dynamically inserted input fields

How can I make my modal box appear after someone clicks on selecting a college?

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

Accordion-inspired multi-layer list navigation

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

How to position Angular Material menu on the right side

Automatically updating database with Ajax post submission

Assign the jQuery library to a variable