위치 부분 끝 부분 이미지

Question

이미지의 맨 아래에 고정되도록 행 클래스를 정렬하려고합니다. 바닥에 붙이고 움직이지 않기를 바래요. 내가 짚고 싶은 섹션에 대한 의견을 추가했습니다. footer 태그에서 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>