Ways to adjust flex division to occupy the entire height of its container

https://i.sstatic.net/4YInI.png

https://i.sstatic.net/hu8mG.png

https://i.sstatic.net/Q51ha.png I am looking to activate an onClick event on the body where discussions and icons are located. While triggering onClick on the body itself poses no issue, I am facing complications with the space in the area that causes it to malfunction. Is there a solution to eliminate this gap and enable full clickable functionality for the entire body?

 <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Some content from a map</a>
        </div>
        <div class="d-flex flex-column align-items-stretch " onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 flex-1 d-inline-block"  >
            <text class="bg-warning "> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>
htmlcssbootstrap-4onclickbootstrap-5

Answer №1

When utilizing the onclick div, there is no requirement to utilize flex positioning. Adding h-100 will ensure a 100% height.

You can incorporate the following code:

<body>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e7fde0fde2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100 " onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 flex-1 d-inline-block"  >
            <text class="bg-warning "> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>
      
  </body>

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

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

htmlcss

Ways to align Bootstrap navigation elements to the left and other content to the right?

I am currently using a Bootstrap 5.x navbar on my website with the following code: <nav class="navbar navbar-expand-lg navbar-custom navbar-dark fixed-top"> <div class="container-fluid px-5"> <a class= ...

navbarbootstrap-5

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque ...

javascripthtmlcssbootstrap-4

Creating a personalized error page with the .htaccess file

I want to create personalized error pages for different errors This is the layout of my directory: .htaccess error_pages: error_400.html error_401.html error_404.html ...

phphtmlcss.htaccess

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario. CSS: div { display:none; background:red; width:200px; height:200px; } ...

javascriptcsshtml

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

htmlcss

Identifying shifts in offsetTop

In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea. The layout consists of two blocks - Block 1 and Block 2. Block 1 is expan ...

javascripthtmlcssangular

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Creating a Twitter-like platform where I can post tweets and have them display on the same page has been quite challenging. I've set up each post to have an Edit button initially hidden with 'display:none'. However, when I try to click on th ...

javascripthtmlnode.jsexpressejs

Learn how to display HTML content in trNgGrid using the $sce.trustAsHtml method

I am currently working with a table that has search options implemented using trNgGrid.js. The data for this table comes from a Sharepoint list where one of the columns contains HTML content that I need to display. To achieve this, I attempted using $sce. ...

javascriptjqueryhtmlangularjs

"Form submission fails to populate _POST when file and text fields are used simultaneously

Looking for a solution... <form action="upload.php" method="get" enctype="multipart/form-data"> Enter a 10 digit mobile number: &nbsp;<input id="imgphno" type="text" maxlength="10" /> <br/><br/> <input id="file" type="file" ...

phphtmlhttp-post

Collision of CSS styles with a different CSS stylesheet causing conflicts

Currently, I am in the process of developing a website and have encountered a specific issue. Within my page, there are various divs and tables present. I have meticulously crafted classes and styles to customize the appearance of these elements to align ...

jqueryhtmlcss

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

htmlxpathsiblings

Generate rows based on the quantity of items in Django templates

My current goal is: To create a <div class="row-fluid center"> and only display a maximum of 3 elements from list.dias.all. However, I am struggling to come up with the correct code. <div class="row-fluid center" id="{{list.dias.all.count ...

jqueryhtmlcssdjangodjango-templates

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

htmlcsscss-position

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

Is there a way for an input form to completely fill a table data cell without increasing the width of the entire row?

I would like to add a row of text inputs at the bottom of my table, with each input having the same size as the widest element in their respective rows. I have tried setting the width to 100%, but this ends up expanding the entire row, which is not the des ...

phphtmlcsshtml-table

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

javascriptc#jqueryhtmlasp.net

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

I am currently working on a desktop application where I am trying to filter specific divs inside an iframe using AppJS. However, I am facing an issue with hiding some of the div elements. Here is the code snippet: <!DOCTYPE html> <html> <s ...

jqueryhtmlappjs

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Manipulating SVG filter attributes with CSS: A comprehensive guide

In my quest to master CSS animation, I found myself needing to manipulate the values of SVG filter attributes. While attempting to reference a CSS variable within the specularConstant attribute, I encountered an error from the browser. Is it feasible to ...

csscss-animationssvg-filterscss-variables