The div element is overflowing beyond the available space

I have already searched for a solution to this question, but despite trying everything, I have not been able to find one. Therefore, I am asking again, my apologies :-).

My challenge is to make a row fill all the remaining screen space on the page, but no matter what I do, it remains at its initial size.

Please note that the map fits the size of the div.

Below is the code I am currently using:

<div class="row">
  <div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">
    <div class="card shadow mb-4 h-100">

      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">
          Carte des balises
        </h6>
      </div>

      <div class="card-body">
        <div id="map"></div>
      </div>

    </div>
  </div>
</div>

Here is a snapshot of the page's appearance: https://i.sstatic.net/7ydMz.png

If anyone can provide me with some guidance or tips, I would greatly appreciate it!

Thank you in advance :)

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

<div class="card shadow mb-4 h-100">

The class h-100 in this code snippet instructs the element to take up 100% of the height of its parent.

<div class="col-xl-12 col-md-12 mb-12 col-lg-12 ">

This element does not have a fixed height set. In HTML, block elements typically do not have a predefined height and instead rely on their children for height calculations.

To address this issue, you can assign a specified height to the parent element like so:

In your HTML, add a custom class:

<div class="col-xl-12 col-md-12 mb-12 col-lg-12 map-height">

In your CSS file, define the custom class as follows:

.map-height{
   min-height:calc( 100vh - 300px )
}

Here, the value of 300 px is used as an example, but it should be adjusted based on the heights of your header, section with big labels, and footer. These values may need to be calculated if they are static.

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

A step-by-step guide on transforming an array of objects into an array of arrays with the help of Ramda

I want to convert the following data: [ { a: 2000, b: 4000 }, { a: 8000, b: 5000 }, { a: 6000, b: 1000 } ]; Into this format: [ [ 2000, 8000, 6000 ], [ 4000, 5000, 1000 ] ]; Using Ramda library. I am able to achieve this using R.reduce functio ...

javascriptarraysjavascript-objectsramda.js

convert HTML string into a React component using a customized parser

I received an HTML string from the server that looks like this: <h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p> My goal is to modify the HTML by replacing the <img class="cover" src="s ...

javascriptreactjsreact-dom

Launch Internet Explorer and input variable values (such as ScriptEngineMinorVersion)

I am looking to create a script that can open a file and inject values into it. Here is a basic example: Set WshShell = WScript.CreateObject("WScript.Shell") Return = WshShell.Run("iexplore.exe google.com", 1) However, I also need to modify some variab ...

javascripthtmlvbscriptinternet-explorer-9

Error in template loading

Currently, I am going through the Angular.js tutorial to learn how to incorporate some of its advanced features into my existing applications. Everything has been smooth sailing until I reached the (angular route) section. Unfortunately, I've hit a ro ...

javascriptangularjsnode.jsexpress

Manually detecting changes in the query string using AngularJS

My AngularJS application includes an edit form with a routing URL like app/edit/:id. When I navigate to app/edit/5, I am able to edit the object with ID 5. However, if I manually change the URL to app/edit/6, the application loads the object with ID 6 in ...

javascriptangularjshttpgetquery-string

Trouble with linking an external JavaScript file in HTML document

I'm having some trouble including an external JavaScript file in my HTML. I followed the steps but the pie chart is not showing up as expected. Can someone please take a look and let me know if I missed anything? Here's the link to where I got th ...

javascripthtml

In Javascript, we can increment the current date by utilizing the `getDate()`

I am trying to create an if statement in JavaScript; if (nextProcessingDate > today ) { //do something } nextProcessingDate has a timestamp assigned, like 09/07/2014 12:10:17 To assign today's timestamp to the today variable, I am using this c ...

javascriptif-statement

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...

javascriptreactjstypescriptnext.js

Aligning a rotated paragraph in the middle of its parent container

Here is my current progress: http://jsfiddle.net/2Zrx7/2/ .events{ height:100px; position: relative; } .tt_username{ position: absolute; top:0px; height: 100%; width: 30px; background: #ccc; text-align: center; } .tt_usern ...

javascriptjquerycss

What are some techniques for obtaining the second duplicate value from a JSON Array in a React JS application by utilizing lodash?

Currently, I am tackling a project that requires me to eliminate duplicate values from a JSON array object in react JS with specific criteria. My initial attempt was to use the _.uniqBy method, but it only retained the first value from each set of duplicat ...

javascriptreactjsjsonlodash

The state update is triggering a soft refresh of the page within Next.js

In my Next.js project, I have integrated a modal component using Radix UI that includes two-way bound inputs with state management. The issue arises when any state is updated, triggering a page-wide re-render and refreshing all states. Here is a snippet of ...

javascriptreactjstypescriptnext.jsstate

What is the best way to incorporate a new attribute into a particular CSS class?

Just to provide some context, I am relatively new to all of this. Please bear with me. I have a unique CSS class that is specifically assigned to thumbnail images on my Wordpress website. Currently, I am using a script that adds a "Pin it" hover link to a ...

jqueryhtmlcsswordpress

Utilizing NGINX as a reverse proxy for secure communication with Node.js

I'm currently running an NGINX server setup as a reverse-proxy server for a node application. I am now trying to enable HTTPS, but every time I attempt to access the site via HTTPS, I encounter a "502: Bad Gateway" error. server { listen 80; ...

javascriptnode.jsexpressnginx

Eliminating blank attributes within an array of objects

I'm currently working on a task that involves creating an array to summarize another array. I've received valuable suggestions from various sources, including this discussion on Stack Overflow. Although the solutions provided are effective, they ...

javascriptarraysobjectkey

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

How do I remove the scroll bar from the datagrid using Material UI?

https://i.stack.imgur.com/lM01l.png Is there a way to remove the scroll bar at the bottom of the page? I have already attempted using autoPageSize, but it did not solve the issue. Here is the link to the autoPageSize documentation. import { DataGrid } f ...

javascriptreactjsmaterial-uidatagridmaterial-design

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

cssvue.jssvg

Vanishing Items - Three.js CanvasRenderer

I'm in a bit of a pickle here. I can't figure out why my objects are disappearing when using the canvas renderer. Strangely enough, everything works fine with the webGL renderer. Unfortunately, I need to make sure this displays properly on mobile ...

javascriptcanvasthree.js

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

htmlcssflexbox