Creating a div with a scrollbar limited to a maximum of 100% of the page size

<!-- **********************************************************************************************************************************************************
      RIGHT SIDEBAR CONTENT
      *********************************************************************************************************************************************************** -->

        <h3>REMEMBER</h3>
        <!-- Open Scrollable Container -->
        <div style="overflow:scroll; height:200px;">                   
          <!-- Action -->
          <div class="desc">
            <div class="thumb">
              <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
            </div>
            <div class="details">
              <p><muted>In 5 hours</muted><br/>
               <a href="/disp_events">The First Event</a> starts.<br/>
             </p>
           </div>
         </div>

         <!-- Action -->
         <div class="desc">
          <div class="thumb">
            <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
          </div>
          <div class="details">
            <p><muted>Tomorrow</muted><br/>
             <a href="/disp_events"> Basketball </a> will be played<br/>
           </p>
         </div>
       </div>
     </div> <!-- Close scrollable div -->

     <h3>FEATURED EVENTS</h3>
     <!-- Open Scrollable Container -->
     <!-- TODO: Make the height of the whole thing 100% -->
     <div style="overflow:scroll; height:150px;">                   
      <!-- First Action -->
      <div class="desc">
       <div class="thumb">
        <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
      </div>
      <div class="details">
        <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
         <a href="/disp_events">Tennis Match B) </a> will start.<br/>
       </p>
     </div>
   </div>

   <!-- Second Action -->
   <div class="desc">
    <div class="thumb">
      <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
    </div>
    <div class="details">
      <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
       <a href="/disp_events">Sportsball</a> will start.<br/>
     </p>
   </div>
 </div>

 <!-- Third Action -->
 <div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
     <a href="/disp_events">Fútbol yo </a> will start.<br/>
   </p>
 </div>
</div>

<!-- Fourth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>16 years ago at <a href="/disp_events">France</a></muted><br/>
     <a href="/disp_events">A passed event </a> happened.<br/>
   </p>
 </div>
</div>

<!-- Fifth Action -->
<div class="desc">
  <div class="thumb">
    <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
  </div>
  <div class="details">
    <p><muted>In a week at <a href="#">New York</a></muted><br/>
     <a href="#">Bigest Party every</a> will start.<br/>
   </p>
 </div>
</div>

</div> <!-- Close scrollable div -->

</div><!-- /col-lg-3 -->

I am interested in finding a solution to limit the size of my scrollbar within a div to no more than 100% of the page size. However, specifying the height of the div as 100% is not effective.

Below is the HTML code that configures all the divs:

     <h3>REMEMBER</h3>
        <!-- Open Scrollable Container -->
        <div style="overflow:scroll; height:200px;">                   
          <!-- Action -->
          <div class="desc">
            <div class="thumb">
              <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
            </div>
            <div class="details">
              <p><muted>In 5 hours</muted><br/>
               <a href="/disp_events">The First Event</a> starts.<br/>
             </p>
           </div>
         </div>


         <!-- Action -->
         <div class="desc">
          <div class="thumb">
            <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
          </div>
          <div class="details">
            <p><muted>Tomorrow</muted><br/>
             <a href="/disp_events"> Basketball </a> will be played<br/>
           </p>
         </div>
       </div>
     </div> <!-- Close scrollable div -->



     <h3>FEATURED EVENTS</h3>
     <!-- Open Scrollable Container -->
     <!-- TODO: Make the height of the whole thing 100% -->
     <div style="overflow:scroll; height:150px;">                   
      <!-- First Action -->
      <div class="desc">
       <div class="thumb">
        <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
      </div>
      <div class="details">
        <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
         <a href="/disp_events">Tennis Match B) </a> will start.<br/>
       </p>
     </div>
   </div>

   <!-- Second Action -->
   <div class="desc">
    <div class="thumb">
      <span class="badge bg-theme"><i class="fa fa-clock-o"></i></span>
    </div>
    <div class="details">
      <p><muted>In a week at <a href="/disp_events">New York</a></muted><br/>
       <a href="/disp_events">Sportsball</a> will start.<br/>
     </p>
   </div>
 </div>

<! -- Third Action - & GT;
< DIV CLASS = "DESC" & GT;
< DIV CLASS = "THUMB" & GT;
& LT; SPAN CLASS = "BADGE BG-THEME" & GT; & LT; I CLASS = "FA FA-CLOCK-O" & GT; & LT; / I & GT; & LT; / SPAN & GT;
& LT; / DIV & GT;
& LT; DIV CLASS = "DETAILS" & GT;
& LT; P & GT; & LT; MUTED & GT; A WEEK AT & LT; A HREF "/ DISP_EVENTS" & GT; NEW YORK & LT; / A & GT; & LT; / MUTED & GT; & LT; BR & GT;;
 & LT; A HREF = "/ DISP_EVENTS" & GT; F t BOl Yo & LT; / A & GT; WILL START & LT; BR & GT;;
& LT; / P & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;
& LT; !-- FOURTH ACTION -- & GT;
& LT; DIV CLASS = "DESC" & GT;
& LT; DIV CLASS = "THUMB" & GT;
& LT; SPAN CLASS = "BADGE BG-THEME" & GT; & LT; I CLASS = "FA FA-CLOCK-O" & GT; & LT; / I & GT; & LT; / SPAN & GT;
& LT; / DIV & GT;
& LT; DIV CLASS = "DETAILS" & GT;
& LT; P & GT; & LT; MUTED & GT; 16 YEARS AGO AT & LT; A HREF "/ DISP_EVENTS" & GT; FRANCE & LT; / MUTED & GT; & LT; BR & GT;;
 & LT; A HREF = "/ DISP_EVENTS" & GT; A PASSED EVENT & LT; / A & GT; HAPPENED & LT; BR & GT;;
& LT; / P & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;
& LT;!-- FIFTH ACTION -- & GT;
& LT; DIV CLASS = "DESC" & GT;
& LT; DIV CLASS = "THUMB" & GT;
& LT; SPAN CLASS = "BADGE BG-THEME" & GT; & LT; I CLASS = "FA FA-CLOCK-O" & GT; & LT; / I & GT; & LT; / SPAN & GT;
& LT; / DIV & GT;
& LT; DIV CLASS = "DETAILS" & GT;
& LT; P & GT; & LT; MUTED & GT; IN A WEEK AT & LT; A HREF "#" & GT; NEW YORK & LT; / MUTED & GT; & LT; BR & GT;;
 & LT; A HREF = "#" & GT; BIGEST PARTY EVERY & LT; / A & GT; WILL START & LT; BR & GT;;
& LT; / P & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;

& LT; / DIV & GT; & LT;!-- CLOSE SCROLLABLE DIV --& GT;

& LT; / DIV & GT; & LT;!-- / COL-LG-3 --& GT;

When using the height attribute with a value of 200px it works, but setting it to 100% results in the div occupying all available space without deploying a scrollbar.

How can this issue be resolved?

htmlcssscrollbar

Answer №1

Make sure to set a height for your body tag so that it fills the entire screen height by using 100vh.

<body style="height: 100vh;">
  <div style="height: 200px">
    This container will always be 200px tall
  </div>
  <div style="height: calc(100% - 200px)">
    This container will always take up the remaining space on the screen after the 200px container.
  </div>
</body>

Check out this JSFiddle for an example.

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

When I start scrolling down, the Jumptron background image vanishes

Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...

javascripthtmlruby-on-railstwitter-bootstrapcss

Error with Unexpected Token HTML found in IBM Domino Web application

Currently working on an outdated IBM Lotus Domino web application that does not utilize XPages. The page is consistently encountering HTML errors related to the following line of code: <tr valign="top"><td width="20"><img width="1" height= ...

htmllotus-dominolotus

Please proceed with submitting your choices in the order that you have selected

My goal is to submit options from a dropdown list in the order they are selected, rather than in the order they appear in the list. How can I achieve this? Here is the HTML code for the dropdown: < select style = "padding: 1em;" name = "skills" multi ...

javascriptjqueryhtml

Enhance your website with dynamic effects by incorporating CSS3 columns and responsive layouts. Utilize CSS3 or jQuery/JavaScript to

I have decided to create a masonry style layout using CSS3 for the columns, which has made building the layout easier and more precise. This is especially useful as I am working on a responsive design. Currently, I am implementing CSS3 media queries to ad ...

jquerycssanimationtransitionmultiple-columns

Could you provide me with some information regarding the relationship between screen resolution and screen size?

When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...

htmlcss

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

javascriptjqueryajaxhtmljson.net

Adjusting the position of an iframe with a YouTube video when the window is resized

I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...

javascriptjqueryhtmliframe

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

javascriptjqueryhtmljquery-ui

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...

javascripthtmljquerydatatables

Attempting to display an HTML image utilizing data storage

I'm currently working on building a database for animals at an animal shelter. I have created tables containing species information and when a user selects a specific species, all available animals are displayed. Now, I want users to be able to click ...

javascriptjqueryhtml

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

javascripthtmlprototypejs

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

phpjqueryhtmlcssregex

Arranging elements in a row and column to ensure proper alignment

https://i.stack.imgur.com/LMsTg.png I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet: <div class="container"> ...

csslaravelbootstrap-5

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

Our application is performing well, but there is an issue with some users copying text to Word before pasting it into the app. The HTML gets parsed out somewhat correctly, but it often includes tags from outlook or word that our XHTML engine doesn't r ...

htmlms-office

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

Dynamic search form technology

My HTML view includes a search form and AJAX code to handle the form request $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a. ...

javascriptjqueryhtmlajax

The positioning of the parent element shifts as a result of the CSS

What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...

css

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms