HTML、CSS、JQuery网页正文在垂直方向上拉伸过大

HTML,CSS ,JQuery Webpage body too much stretch vertically

本文关键字：方向 JQuery CSS 网页 正文 HTML 垂直      更新时间：2023-09-26

所以我的项目已经完成了，我本来打算创建一个完整的网页滑块作为我网站的背景主题，现在它完美地工作了！

问题是它的垂直拉伸过大，你可以向右滚动（你不应该这样做）&我不知道为什么它现在会这样。我一直在尝试用JavaScript修复它，但它什么也没做，所以我在这里寻找一些答案。我正在努力实现的是在水平方向（它已经固定）和垂直方向（我似乎无法工作）都有一个固定大小的网页。它似乎在小提琴上工作得很好（我是小提琴新手）

这是我的小提琴；源代码。

https://jsfiddle.net/z8vqp7fe/1/

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
    height:100%;
    width:100%;
    overflow: hidden;
}
.cycle-slideshow {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cycle-prev, .cycle-next {
    font-size: 200;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 9999;
    cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}

.cycle-pager{
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    position: top;
    bottom: 20px;
    z-index: 9999;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
  </style>
</head>

<body>

<!-- Full Width Responsive Slider -->
  <div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/Untitled.png">
    <img src="images/wp.png">
    <img src="images/wp2.png">
  </div>
<!-- Full Width Responsive Slider -->

</body>
</html>

试试这个顺便说一句，不存在position: top；并且font-size: 200应当是200%、200em或200px等

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
    html,
    body,
    img {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%
    }
    body {
      font-family: Sans-Serif;
    }
    .container {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .cycle-slideshow {
      width: 100%;
      display: block;
      position: relative;
      margin: 0 auto;
    }
    .cycle-prev,
    .cycle-next {
      font-size: 200%;
      color: #FFF;
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -16px;
      z-index: 9999;
      cursor: pointer;
    }
    .cycle-prev {
      left: 10%;
    }
    .cycle-next {
      right: 10%;
    }
    .cycle-pager {
      width: 100%;
      text-align: center;
      display: block;
      position: absolute;
      bottom: 20px;
      z-index: 9999;
    }
    .cycle-pager span {
      text-indent: 100%;
      white-space: nowrap;
      ;
      width: 12px;
      height: 12px;
      display: inline-block;
      border: 1px solid #FFF;
      border-radius: 50%;
      margin: 0 10px;
      cursor: pointer;
    }
    .cycle-pager .cycle-pager-active {
      background: #FFF;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Full Width Responsive Slider -->
    <div class="cycle-slideshow">
      <span class="cycle-prev">&#9001;</span>
      <span class="cycle-next">&#9002;</span>
      <span class="cycle-pager"></span>
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      <img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg">
    </div>
    <!-- Full Width Responsive Slider -->
</body>
</html>

相关文章：