时间戳

首页 > 解决方案 > HTML 网格在我的网页右侧创建了令人讨厌的边距

javascript - HTML 网格在我的网页右侧创建了令人讨厌的边距

问题描述

我开发了这个网站来测试我的想法。问题是网格设计在页面右侧创建了一个非常烦人的边距，它不是任何 HTML 标记的一部分，这会影响放大/缩小效果。

我已经尝试将所有边距和填充设置为 0px，如下所示：

html, body, div {
  margin: 0px
  padding: 0px;
}

更改这些元素的宽度也不起作用。

（链接到包含该页面的 GitHub 存储库）

let loremipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget libero vel arcu pharetra finibus. Morbi sem dui, mollis eget sollicitudin ac, tincidunt in ligula. Nulla finibus lorem vitae nisi blandit, nec bibendum nibh tempor. Pellentesque vestibulum, felis ac vehicula venenatis, nisl leo sollicitudin enim, eu porttitor augue ex eget lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque gravida mollis elit. Pellentesque convallis nisi non lectus porttitor, non convallis ligula posuere. Donec eu metus vel risus finibus faucibus.".split(" ");
var container = $(".grid-container");
for (var i = 0; i < loremipsum.length; i++) {
  var hue = Math.round(Math.random() * 360 / 45) * 45;
  var item = $("<div></div>").css("background-image", "linear-gradient(to right, hsl(" + hue + ", 100%, 50%), hsl(" + hue + ", 100%, 35%))").addClass("grid-item");
  var contents = $("<div></div>").text(loremipsum[i].charAt(0).toUpperCase() + loremipsum[i].substr(1, loremipsum[i].length)).addClass("grid-contents");
  item.append(contents);
  container.append(item);
}
$(".grid-item").each(function(i, obj) {
  $(this).click(function() {
    upperleft($(this));
    if ($(this).data("grown") == true)
      shrink($(this));
    else
      grow($(this));
  });
});

function upperleft(elm) {
  elm.css({
    "top": -elm.position().top - elm.height() + elm.height() / 1.025 + $(window).scrollTop() + "px",
    "left": -elm.position().left - elm.width() + elm.width() / 1.025 + "px"
  });
}

function grow(elm) {
  elm.css({
    "width": window.outerWidth + "px",
    "height": window.outerHeight + "px",
    "z-index": "1",
    "border-radius": "0px"
  }).data("grown", true);
  $("body").attr({
    "scroll": "no",
    "style": "overflow: hidden"
  });
}

function shrink(elm) {
  elm.css({
    "width": "100%",
    "height": "300px",
    "z-index": "0",
    "border-radius": "30px"
  }).data("grown", false);
  $("body").attr({
    "scroll": "yes",
    "style": "overflow: scroll"
  });
}
body,
html {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 25px;
  padding: 20px;
}

.grid-item {
  border-radius: 30px;
  height: 300px;
  position: relative;
  transform: scale(1);
  top: 0px;
  left: 0px;
  transition: transform 0.25s, top 0.25s, left 0.25s, width 0.25s, height 0.25s, border-radius 0.25s;
}

.grid-item:hover {
  transform: scale(1.025);
}

.grid-contents {
  position: relative;
  top: 10%;
  left: 12%;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>
  <div class="grid-container"></div>
</body>

</html>

当页面一直滚动到右侧时，我们可以看到那里的空白比左侧多。

左侧 右侧

标签： javascripthtmlcssmargin

解决方案

我把它包裹在一个div容器中，溢出隐藏，宽度为100%以停止页面扩展

let loremipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget libero vel arcu pharetra finibus. Morbi sem dui, mollis eget sollicitudin ac, tincidunt in ligula. Nulla finibus lorem vitae nisi blandit, nec bibendum nibh tempor. Pellentesque vestibulum, felis ac vehicula venenatis, nisl leo sollicitudin enim, eu porttitor augue ex eget lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque gravida mollis elit. Pellentesque convallis nisi non lectus porttitor, non convallis ligula posuere. Donec eu metus vel risus finibus faucibus.".split(" ");
var container = $(".grid-container");
for (var i = 0; i < loremipsum.length; i++) {
  var hue = Math.round(Math.random() * 360 / 45) * 45;
  var item = $("<div></div>").css("background-image", "linear-gradient(to right, hsl(" + hue + ", 100%, 50%), hsl(" + hue + ", 100%, 35%))").addClass("grid-item");
  var contents = $("<div></div>").text(loremipsum[i].charAt(0).toUpperCase() + loremipsum[i].substr(1, loremipsum[i].length)).addClass("grid-contents");
  item.append(contents);
  container.append(item);
}
$(".grid-item").each(function(i, obj) {
  $(this).click(function() {
    upperleft($(this));
    if ($(this).data("grown") == true)
      shrink($(this));
    else
      grow($(this));
  });
});

function upperleft(elm) {
  elm.css({
    "top": -elm.position().top - elm.height() + elm.height() / 1.025 + $(window).scrollTop() + "px",
    "left": -elm.position().left - elm.width() + elm.width() / 1.025 + "px"
  });
}

function grow(elm) {
  elm.css({
    "width": window.outerWidth + "px",
    "height": window.outerHeight + "px",
    "z-index": "1",
    "border-radius": "0px"
  }).data("grown", true);
  $("body").attr({
    "scroll": "no",
    "style": "overflow: hidden"
  });
}

function shrink(elm) {
  elm.css({
    "width": "100%",
    "height": "300px",
    "z-index": "0",
    "border-radius": "30px"
  }).data("grown", false);
  $("body").attr({
    "scroll": "yes",
    "style": "overflow: scroll"
  });
}
body,
html {
  margin: 0;
  padding: 0;
}
.containsAll{
width:100%;
overflow:hidden;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 25px;
  padding: 20px;
}

.grid-item {
  border-radius: 30px;
  height: 300px;
  position: relative;
  transform: scale(1);
  top: 0px;
  left: 0px;
  transition: transform 0.25s, top 0.25s, left 0.25s, width 0.25s, height 0.25s, border-radius 0.25s;
}

.grid-item:hover {
  transform: scale(1.025);
}

.grid-contents {
  position: relative;
  top: 10%;
  left: 12%;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>
  <div class="containsAll">
  <div class="grid-container"></div>
  </div>
</body>

</html>

推荐阅读