Question

我正在尝试将div放置在包含div的底部。 https://prnt.sc/q2iasz

我尝试将position: relative用于父div和position: absolute, bottom: 0，但是代码似乎无法正常工作。如果我提供fixed-bottom类，则div会一直走到底。

这是我的代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero position-relative">
  <div class="absolute-wrapper h-100">
    <div class="row bg-white fixed-bottom">
      <div class="container w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>
  </div>
</section>

这是屏幕截图。 https://prnt.sc/q2ierd

我在定位上做错了吗？

Answer 1

fixed-bottom给出元素position:fixed，使其相对于视口

改为使用.position-absolute

.hero{
  background:red;
  height:100px; /* to mimic other content which will give the parent height*/
}

.position-absolute{
  bottom:0;
  background:#ffffff7d;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero position-relative">
  <div class="absolute-wrapper h-100">
    <div class="row position-absolute">
      <div class="container w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>
  </div>
</section>

Answer 2

似乎您需要除position-absolute之外的自定义类：

.absolute-bottom {bottom:0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<section class="fluid-container hero ">
  <div class="position-relative">
    <img src="http://dummyimage.com/1200x300&text=fake_img_content" class="col m-auto ">
    <div class="d-flex position-absolute  absolute-bottom w-100 ">
      <div class="container bg-white  w-50">
        <h1 class="content text-dark">left</h1>
      </div>
      <div class="container w-50">
        <h1 class="content text-dark">right</h1>
      </div>
    </div>

  </div> hello
</section>

将div放在父div的底部-Bootstrap

2 个答案: