如何創建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>

否則，如果您的意思是您希望正方形調整大小，以便所有正方形都適合不同的窗口高度。 我環顧四周，看看是否可以完成這樣的事情，但無法弄清楚。