问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

此段代码如何将div置于窗口底部

头像
wjnds
    18123246

    想把整个swiper-container置于距窗口底部30px，但设置bottom无效，高手请赐教

    <html>
 <head> 
  <meta charset="utf-8" /> 
  <link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css" /> 
  <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>
    html5cssjavascriptphp
    阅读 2.6k
    4 个回答
    得票最新
    头像
    hfhan
      29k72241
      ✓ 已被采纳
      .swiper-container {
  height:100px;
  max-width:580px;
      position: fixed;
      bottom: 30px;
      left: 50%;
  transform: translate(-50%);
}
      头像
      zhangrxiang
        62418
        .swiper-container {
    width: 100%;
    height: 100%;
    max-width: 580px;
    position: absolute;
    bottom: 30px;
}
        头像
        前端黑洞
          3.5k21218

          你要父元素和子元素同时整个定位，他才能有效啊，这样当然不能拉

          头像
          Rossy1
            2.1k1069119

            position：fixed;
            bottom:30px;

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题