Question

我在这里粘贴我的代码。

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="../css/idangerous.swiper.css">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css" />

 <title>Demo</title>
 <style>
/* Demo Styles */
 html {
  height: 100%;
} 
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: auto;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #666666;
}
.blue-slide {
  background: #666666;
}
.orange-slide {
  background: #666666;
}
.green-slide {
  background: #666666;
}
.pink-slide {
  background: #666666;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;

  margin-bottom: 0;
  line-height: 45px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 20%;
  margin-left: 35%;
  margin-right: 35%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
  background: #fff;
}
 .wood
 {
  height: 10%;
  width: 10%;
  margin-left:50%;
  margin-bottom: 0;
  padding-top:50%;

 }
  </style>
</head>
<body>

  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide red-slide">
       <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
       <p>slide1</p>
      </div>

      <div class="swiper-slide blue-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide">
        <img id="trigger" class="wood" src="../images/wood.jpg" alt="US Flag "/>
        <div class="title">Slide 5</div>
      </div>

    </div>
    <div class="pagination" style="align:center;"></div>

     <div data-theme="b" data-position="fixed" style="height:20%;">
            <ul data-role="listview">
                                <li><a rel="external" href="../html/index.html" style="background: #666;color:white;font-family:sans-serif">Save with lighting</a><a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;">List Item</a></li>
                                <li><a rel="external" href="../html/one.html" data-rel="popup" style="background: #666;color:white;font-family:sans-serif">Explore light options</a><a href="#" data-rel="popup" onclick="alert('hello');"style="background: #666;">List Item</a></li>
            </ul>
     </div> 
   </div>
   <script src="../js/jquery-1.10.1.min.js"></script>
  <script src="../js/idangerous.swiper-2.1.min.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })
  </script>
</body>
</html>

在上面的代码中，我无法适应屏幕，虽然我已经对我的代码做了很多更改。可以请你给我任何建议来解决这个问题。为此我把高度：auto为主要div 。提前收到你的建议

Answer 1

你可以给body和html提供以下css属性：

html, body {
   overflow-y: hidden;
}

使用此功能，您可以禁用用户滚动。

如果您希望html文档的第一个元素填满您的屏幕，您只需将html, body元素的高度设为100%即可：

html, body {
   height: 100%;
}

要制作全屏的元素，您还需要height 100%。像这样：

.fitScreen {
   height: 100%;
   background-color: yellow;
}

你还需要进行通用的CSS重置，如下所示：

* {
   margin: 0;
   padding: 0;
   border: 0;
}

<强> Demo here

<强> New demo

现在您只能滚动.fitScreen元素。

如何在响应式设计中防止页面中的垂直滚动

1 个答案: