Question

我的最终目标是能够完美地将我的网格整合到两列中，以便它适合我的移动设备上的整个屏幕。现在，我仍然需要向下滚动一点，但这不是我想要的。我希望我的屏幕不可滚动，但图像/屏幕完全符合我的要求。也许摆脱2列之间的空格。现在我的屏幕看起来有点偏，需要一点点滚动。底部的2张图片不合适，需要滚动，如图所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->


  <link rel="stylesheet" href="../dist/css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    
    .swiper-slide {
      top: 0;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      overflow-y: auto;
      height: 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    body {
      margin: 0;
      padding: 0;
      background-color: white;
      font: 10px/13px 'Lucida Sans', sans-serif;
    }
    
    .wrap {
      overflow: hidden;
      margin: 10px;
    }
    
    .box {
      float: center;
      position: relative;
      width: 200%;
      padding-bottom: 100%;
    }
    
    .boxInner {
      position: absolute;
      left: 50px;
      right: -5px;
      top: -10px;
      bottom: 10px;
      overflow: hidden;
    }
    
    .fixed {
      position: absolute;
      left: 30px;
      right: 10px;
      top: -10px;
      bottom: 10px;
      overflow: hidden;
    }
    
    .boxInner img {
      width: 79%;
      height: 75%
    }
    
    .boxInner img.img2 {
      width: 100%;
      height: 50%
    }
    
    body.no-touch .boxInner:hover .titleBox,
    body.touch .boxInner.touchFocus .titleBox {
      margin-bottom: 100;
    }
    
    @media only screen and (max-width: 480px) {
      /* Smartphone view: 1 tile */
      .topnav a:not(:first-child) {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
      .box {
        width: 50%;
        padding-bottom: 30%;
      }
    }
    
    .topnav {
      overflow: hidden;
      background-color: #66CDAA;
    }
    
    .topnav a {
      float: center;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 10px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #98FB98;
      color: white;
    }
    
    .topnav .icon {
      display: none;
    }
    
    .header1 {
      margin: auto;
      float: center;
      padding: 15px;
      font-size: 20px;
    }
  </style>
</head>

<body class="no-touch">
  <!-- Swiper -->
  <div class="topnav" id="myTopnav">
    <a href="#home">Let's Get To Know You!</a>

  </div>
  <div class="swiper-container">

    <div class="swiper-wrapper">


      <div class="swiper-slide">


        <!-- Define all of the tiles: -->
        <div class="header1">What's your skin color?</div><br><br>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/Kz06qEO.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/43tH7Td.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/3uZKpV2.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/SF3vYC9.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/8hujzfl.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/cxvELu2.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/baYebAV.png" />

          </div>
        </div>
        <div class="box">
          <div class="boxInner">
            <img class='img1' src="http://i.imgur.com/iLd0ukK.png" />

          </div>
        </div>


      </div>


    </div>

  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="../dist/js/swiper.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      spaceBetween: 30

    });
  </script>
  <script type="text/javascript">
    $(function() {
      // See if this is a touch device
      if ('ontouchstart' in window) {
        // Set the correct body class
        $('body').removeClass('no-touch').addClass('touch');

        // Add the touch toggle to show text
        $('div.boxInner img').click(function() {
          $(this).closest('.boxInner').toggleClass('touchFocus');
        });
      }
    });
  </script>
</body>

</html>

Answer 1

这是因为你的＆＃34; swiper容器＆＃34;是height:100%，但因为它上面的元素而开始下降33px。您可以尝试使用calc() css browser target range allows it以使其高度为100％减去上面元素的高度。类似的东西：

height: calc(100% - 33px);

网格，所以我可以适应整个手机屏幕，没有滚动

1 个答案: