Html 如何修复 flex div 以将全高作为其父级

发布于10月26日

Actually, I want to trigger a onClick on the body where discussion and icons are positioned. However, onClick on the body is not having any problems. The spacing area, however, is where it breaks. I wish to close this gap. but are unable to. Is there a fix for the space that would allow me to make the entire body clickable?

 <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="d-flex flex-column align-items-strentch " 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>

推荐答案

对于onclick div人，你没有义务使用弹性体位. 你可以加上h-100来获得onclick div%的高度

您可以使用以下命令:

<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/bootstrap@4.3.1/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>