如何创建js和html css

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>

我没有使用任何像 bootstrap 这样的 ui 库，只是使用 vanilla 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>

否则，如果您的意思是您希望正方形调整大小，以便所有正方形都适合不同的窗口高度。 我环顾四周，看看是否可以完成这样的事情，但无法弄清楚。