Fill a grid child with an excessive amount of content without specifying a fixed height

Check out this JS Fiddle example

.grid {
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
  background-color:yellow;
}

.lots-of-content-div {
  height:100%;
  background-color:orange;
  overflow-y:auto;
}

<div class="grid">
  <p>Let's designate this as the header section</p>
  <div class="lots-of-content-div">
    <ul>
      // A very lengthy list!
    </ul>
  </div>
</div>

If I want the lots-of-content-div div to be scrollable without specifying absolute heights, allowing me to easily insert the component anywhere and have it fill the entire vertical space, how can I achieve this?

javascripthtmljquerycss

Answer №1

parentHeight = jQuery(".grid").parent().outerHeight();
pHeight = jQuery(".grid").find("p").outerHeight(); 
jQuery(".lots-of-content-div").css({'height': parentHeight-pHeight});
    .any-parent-element {
      height: 300px;
    }
    .grid {
      height:100%;
      display:grid;
      grid-template-rows:auto 1fr;
      background-color:yellow;     
    }

    .lots-of-content-div {
      height:0px;
      background-color:orange;
      overflow-y:auto;
    }
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <div class="any-parent-element">
    <div class="grid">
      <p>Let's call this one the header</p>
      <div class="lots-of-content-div">
        <ul>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
          <li>Hello!</li>
        </ul>
      </div>
    </div>
  </div>

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

The Bootstrap 4 navigation bar is failing to extend fully across the width when a dropdown menu

Here is the code I am using for the navigation bar. When I click on the dropdown button, this is how it appears on my webpage: Click here <nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3"> <a class="navbar-brand" ...

htmlcssbootstrap-4

npm encountered a premature closure

I recently purchased and started using a ReactJS template which you can check out here My goal is to install all the dependencies by running npm install in the root directory of the template (React-App) However, I encountered an ERROR message like this: ...

javascriptnode.jsreactjsnpm

Creating a table with merged (colspan or rowspan) cells in HTML

Looking for assistance in creating an HTML table with a specific structure. Any help is appreciated! Thank you! https://i.stack.imgur.com/GVfhs.png Edit : [[Added the headers to table]].We need to develop this table within an Angular 9 application using T ...

htmlangulartypescripthtml-tablerow

Adding JSON content to a form for editing functionality within an Angular 8 CRUD application

I am currently working on building a Single Page Application using Angular 8 for the frontend and Laravel for the backend. I have been able to successfully pass data to the backend via JWT, and everything is functioning as expected. The application follows ...

javascriptnode.jsangulartypescript

Leveraging Variables within my .env Configuration

Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...

javascriptnode.jsenvironment-variables

Customize the navbar on the screen to prevent overflow and eliminate the need for a horizontal

I have a customized navbar(bootstrap) on my webpage. <nav class='navbar fixed-top navCustom '> <div class='navComp'> <input class='dateStyle' id='dateChart' type='date' value=& ...

htmlcsstwitter-bootstrap

Determining the quantity of displays

Can we detect the number of screens in use using JavaScript or jQuery? We are working on an application that should not be displayed on multiple screens, even if the hardware allows for it. Appreciate any assistance with this matter. Thank you. ...

javascriptjqueryhtml

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss

After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

When I click on a checkbox, an animation is added to a div. However, I am struggling to remove this animation unless I click elsewhere on the document. The goal is for the checkbox to both add and remove the class. JS $('#inOrder').click(functi ...

javascripthtmljquerycss

Issue: Module 'js' not found in Node.js Express application

I am currently working on a NodeJS express application. While developing, I encountered the following issue: Error: Cannot find module 'js' After researching online, I couldn't find a solution. The typical troubleshooting steps didn&ap ...

javascriptnode.jsnpm

Implementing Multiple HTML Files Loading in QUnit

Currently, I am utilizing QUnit for unit testing JavaScript and jQuery. The structure of my HTML document is as follows: <!DOCTYPE html> <html> <head> <title>QUnit Test Suite</title> <script src="../lib/jquery.js">< ...

javascriptjqueryqunit

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

javascriptjqueryajax

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Suppose I were to create a constructor for a functional class with TypeA as an argument, and TypeB representing the type of the class itself. In such cases, I can implement it using: functionName(argument: TypeA): TypeB { this.property = argument; ...

javascripttypescriptfunctional-programming

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

javascripthtmlexpressejsbackend

Tips for personalizing the css styles of an alert box?

I am in need of customizing the alert box using CSS attributes. Currently, I am able to achieve a similar effect with the code below: JQUERY: $('<div class="alertMessage">Error first</div>') .insertAfter($('#componentName' ...

javascriptjqueryhtmlcss

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

Node.js project is set up globally on personal system

Introduction I'm diving into the world of Node.js and eager to learn. NPM has been a game changer for me as I can easily install packages globally and utilize them as standalone applications accessible from anywhere on my system. To my surprise, thi ...

javascriptwindowsnode.jsnpm

Conceal navigation buttons on the first and last pages of the slider

I'm attempting to develop a slider that hides the "previous" button when it is on the first slide and hides the "next" button when it reaches the last slide. The slider will be created using a combination of PHP, forms, and JavaScript. Below is the H ...

javascriptphpjqueryhtmlslider