Question

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

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

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

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

(link to the GitHub repo that holds the page)

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>

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

left side right side

Answer 1

我将其包裹在一个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>

HTML网格在我的网页右侧产生了烦人的边距

1 个答案: