Question

一组正方形的响应宽度和高度

我正在创建1：1正方形的网格。用户可以继续添加正方形，我希望正方形的大小保持其长宽比，但要相应地调整大小。棘手的部分是我希望正方形在页面上始终可见-也就是说，没有滚动，并且网页将响应宽度和高度。

我创建了一个示例，该示例在测试时每秒增加一个正方形。但是，我无法使其与高度部分一起使用。我已经能够使用宽度了。

setInterval(() => {
  console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML += (" <div class = 'square' > < /div>");
}, 1000);

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  box-sizing: border-box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<div class="square-container">
  <div class="square"></div>
</div>

我不使用引导程序之类的ui库，而仅使用普通html，css和javascript。

Answer 1

一种方法是在添加每个正方形时自动滚动到屏幕底部。我将此行window.scrollTo(0,document.body.scrollHeight);添加到了您的代码中，这使得它在创建新行时向下滚动。

setInterval(() => {
  //console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML += (" <div class = 'square' > < /div>");
  window.scrollTo(0,document.body.scrollHeight);
}, 1000);

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  box-sizing: border-box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<div class="square-container">
  <div class="square"></div>
</div>

否则，如果您要调整正方形的大小，以使所有正方形都适合窗口的高度，那将是不同的。我环顾四周，看看是否可以完成类似的操作，但无法解决。

如何创建JS和HTML CSS

1 个答案: