Javascript HTML/CSS-注释框在注释部分相互重叠

我试图创建一个评论框，用户可以在其中留下他们的用户名、产品评级和实际评论

我在下面附上了我的html、css和javascript文件，以便您可以运行实际的应用程序。在css文件中，此部分：

li {
    list-style-type: none;
    text-align:left;
    width: 540px;
    height: 200px;
}

实现每个注释的宽度和高度。列表组类：

.list-group {
    height: 600px;
    width: 540px;
    overflow: auto;
    background-color: grey;
}

作为一个整体表示整个注释部分。我将其设置为600px的高度，这样，如果有3条以上的注释/如果注释超过600px（每条注释的高度为200px），则会出现一个滚动条，以便用户可以继续滚动该部分以阅读注释。问题是，当我继续添加注释时，每条注释的高度不会保持在200px，并且会随着添加更多注释而继续缩小。我不知道这是为什么，我真的很感谢你的帮助

这就是我的评论部分的样子，有4条评论，而不是一堆额外的评论。正如你所看到的，个人评论只是不断缩小

函数todoList（）{ var username=document.getElementById（“用户名”）.value var comment=document.getElementById（“comment”）.value var评级=document.getElementById（“评级”）.value var userNameText=document.createTextNode（“用户名：”+Username） var commentText=document.createTextNode（“注释：”+Comment） var ratingText=document.createTextNode（“评级：“+Rating+”/10”） var newListItem=document.createElement（“LI”） newListItem.className=“列表组项目” var newRating=document.createElement（“评级”） newRating.appendChild（ratingText） var newUserName=document.createElement（“用户名”） newUserName.appendChild（userNameText） var newComment=document.createElement（“注释”） newComment.appendChild（commentText） newListItem.appendChild（newRating） newListItem.appendChild（newUserName） newListItem.appendChild（新成员） document.getElementById（“reviewList”）.appendChild（newListItem） }

*{框大小：边框框；}
身体{
背景颜色：蓝色；
}
@关键帧类型{
从{宽度：0；}
} 
输入{
边缘底部：20px；
}
/*每个评论框*/
李{
列表样式类型：无；
文本对齐：左对齐；
宽度：540px；
高度：200px；
}
.评级，评级{
字体大小：25px；
位置：绝对位置；
左：10px；
顶部：10px；
}
.用户名，用户名{
字体大小：25px；
位置：绝对位置；
左：10px；
顶部：40px；
}
评论{
字体大小：25px；
位置：绝对位置；
左：10px；
顶部：70像素；
}
#窗体控件{
字号：2rem；
}
.列表组{
高度：600px；
宽度：540px；
溢出：自动；
背景颜色：灰色；
}

选择一个评级：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
点击我

在todoList函数之外添加一个全局变量<代码>让计数器=1 在该函数的底部，该函数的最后一行是

counter++

。在函数开头添加此逻辑：

var height = (counter*200).toString() + "px"
document.getElementById("review-list").style.height = height;

这将使ul的高度每N个组件增加200px。最后从列表组类中的css中删除高度组件。您可以使ul元素消失，直到有输入。为此，在css to list组中添加属性

visibility:hidden并向函数添加逻辑：
if（counter==1）{document.getElementById（“审阅列表”）.style.visibility=“visible”}

有一种不同的解决方案更容易。如果您希望ul保持相同大小，但希望滚动，只需将overflow更改为scroll

.list-group {
  height:600px;
  width:560px;
  overflow: scroll;
  background-color: grey;
}

当溢出是自动的时，它会将内容聚集在一起，以便将所有内容都显示在屏幕上