鍍金池/ 問答/HTML5  PHP  HTML/ 此段代碼如何將div置于窗口底部

此段代碼如何將div置于窗口底部

想把整個swiper-container置于距窗口底部30px，但設置bottom無效，高手請賜教

<html>
 <head> 
  <meta charset="utf-8" /> 
  <link rel="stylesheet"  /> 
  <style>
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width:100%;
      height:100%;
      max-width:580px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100px;
      height:100px;
    }
  </style> 
 </head> 
 <body> 
  <div class="swiper-container"> 
   <div class="swiper-wrapper"> 
    <div class="swiper-slide" style="background-color:red"></div> 
    <div class="swiper-slide" style="background-color:blue"></div> 
    <div class="swiper-slide" style="background-color:green"></div> 
    <div class="swiper-slide" style="background-color:gray"></div> 
   </div> 
  </div>  
 </body>
</html>
回答
編輯回答
安若晴

position：fixed;
bottom:30px;

2017年12月29日 03:53
編輯回答
純妹

你要父元素和子元素同時整個定位，他才能有效啊，這樣當然不能拉

2018年3月13日 20:38
編輯回答
蔚藍色
.swiper-container {
    width: 100%;
    height: 100%;
    max-width: 580px;
    position: absolute;
    bottom: 30px;
}
2017年12月7日 21:21
編輯回答
寫榮
.swiper-container {
  height:100px;
  max-width:580px;
      position: fixed;
      bottom: 30px;
      left: 50%;
  transform: translate(-50%);
}
2017年2月14日 12:39