将Div定位到图像末尾

Question

我正在尝试将行类对齐以粘贴到图像的底部。我希望它坚持到底部而不是移动。我已经添加了一条关于我想坚持哪一节的评论。它从id #offer。

的页脚标记开始

HTML：

<div id="ImageMain">

<ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
</ul>

<h1>Simplicity is Minimal</h1>

<a href="#" id="homeb">Shop Now</a>

<!--I'm trying to make this section stick to the bottom of #ImageMain-->

<footer id="offer">

<div class="row">
    <div class="col-md-4" align="center">
        <i class="fa fa-truck" aria-hidden="true"></i>
        <h2>Fast Shipping</h2>
        <p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
    </div>

    <div class="col-md-4" align="center">
        <i class="fa fa-reply" aria-hidden="true"></i>
        <h2>Easy Returns</h2>
        <p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
    </div>

    <div class="col-md-4" align="center">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <h2>Caring Customer Service</h2>
        <p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
    </div>

</div>

</footer>

</div>

CSS：

#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}

#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}

#offer i, h2, p {
color: white;
} 

#offer i {
font-size: 35px;
}

Answer 1

position: absolute正是您正在寻找的。您可以在此处详细了解相关信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/position

将position: relative添加到父元素，将position: absolute; bottom: 0; left: 0; right: 0;添加到#offer

#ImageMain {
  background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 1000px;
  text-align: center;
  color: white;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
  position: relative;
}

#offer {
  background-color: rgba(0,0,0,0.5);
  padding: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

#offer i,
h2,
p {
  color: white;
}

#offer i {
  font-size: 35px;
}

<div id="ImageMain">

  <ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
  </ul>

  <h1>Simplicity is Minimal</h1>

  <a href="#" id="homeb">Shop Now</a>

  <!--I'm trying to make this section stick to the bottom of #ImageMain-->

  <footer id="offer">

    <div class="row">
      <div class="col-md-4" align="center">
        <i class="fa fa-truck" aria-hidden="true"></i>
        <h2>Fast Shipping</h2>
        <p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
      </div>

      <div class="col-md-4" align="center">
        <i class="fa fa-reply" aria-hidden="true"></i>
        <h2>Easy Returns</h2>
        <p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
      </div>

      <div class="col-md-4" align="center">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <h2>Caring Customer Service</h2>
        <p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
      </div>

    </div>

  </footer>

</div>