我开发了 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>当页面一直滚动到右侧时，我们可以看到那里的空白比左侧多。
最佳答案
我把它包裹到一个div容器里， overflow hidden ，宽度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>关于javascript - HTML 网格在我的网页右侧创建了烦人的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54174612/