使用jQuery添加元素后，后台停止了

Question

我的网站有问题。我基于JSON文件向页面添加了可变数量的元素。如果太多，背景颜色就会停止。 但是，似乎问题只出现在Firefox和Edge中。它在Chrome上看起来很不错。

这是我的布局的一般CSS代码：

body{
    font-family: 'Roboto', sans-serif;
    display: grid;                              
    grid-template-rows: 1fr 20px;               
    grid-template-columns: 13% 87%;         
    height: 100vh;                              
    grid-template-areas:
    "sidebar content"
    "footer footer";
}

main{
    background-color:#D0CABF;
    grid-area: content;
    text-align: center;
    display: grid;
    grid-template-rows: 30% 1fr 20%;    
    grid-template-columns: 100%;
    grid-template-areas:
    "top"
    "mid"
    "bottom";
 }

这是JS代码：

$.getJSON('/data/risks.json', function(data) {
var html = '';
$.each(data.risk, function(key, value){
    html += '<div class="cardS">';
    html += '<br><p><b>'+value.name+'</b><br><br>'+value.description+'<br><p class="hiddenID">'+value.id+'</p></p>';
    html += '</div>';
 });
$('#jsondata').html(html);
});

我试图将身体的位置设置为“固定”但似乎这会阻止滚动。我不知道如何解决这个问题...

以下是截图：

谢谢！

Answer 1

这是因为 main 中的块是浮动的，可能没有 clearfix CSS ，或者清除CSS以清除浮动块。

您可以使用

Text