个人中心
gpt4 book ai didi

html - 网格，这样我就可以在不滚动的情况下适应整个移动屏幕

转载 作者：行者123 更新时间：2023-11-28 03:22:36 27 4
gpt4 key购买 nike

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

enter image description here 

<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>

最佳答案

这是因为您的“swiper 容器”是 height:100%，但由于其上方的元素，它开始向下 33px。如果你的 browser target range allows it 你可以试试 calc() css为了使它的 100% 高度减去上面元素的高度。像这样的东西:

height: calc(100% - 33px);

关于html - 网格，这样我就可以在不滚动的情况下适应整个移动屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45135812/

27 4 0
文章推荐： c++ - boost::variant 对象构建计数 VS 销毁计数
文章推荐： css - JavaFX - 自定义 TextField
文章推荐： javascript - 将文件拖放到 Html 输入
文章推荐： html - 将 div 放在前一个 div 的溢出子元素下方
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com