HTML-сетка создает раздражающее поле на правой стороне моей веб-страницы - PullRequest
Новая
       9

HTML-сетка создает раздражающее поле на правой стороне моей веб-страницы

0 голосов
/ 14 января 2019

Я разработал этот веб-сайт, чтобы проверить идею, которая у меня возникла. Проблема в том, что дизайн сетки создает очень раздражающее поле в правой части страницы, которое не является частью какого-либо 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>

Когда страница прокручивается полностью вправо, мы видим, что там больше пробелов, чем с левой стороны.

левая сторона правая сторона

1 Ответ

0 голосов
/ 14 января 2019

Я завернул его в контейнер 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>
...