Question

我从互联网上获得了用于创建评论框的HTML代码。它工作得非常好，但随着注释数量的增加，注释会出现在它下面的文本中。我希望评论显示在带滚动条的特定框中。我使用了div，但评论只是开箱即用。我尽我所能，但我真的没有找到解决方案。

以下是我正在使用的CSS -

    <style>
    #details {
    display : block;
    background-color : #9494FF;
    height : 20px;
    width : 130px;
    padding : 4px;
    border-radius : 10px;
    border : 1px solid black;
    cursor : pointer;
    }

    summary::-webkit-details-marker {
        display: none
        }

    textarea {
    resize : none;
    }

    #para {
    display : block;
    overflow : none;
    height : 200px;
    width : 100%;
    resize : none;
    }

</style>

这是代码 -

<ul>

<form>
<textarea id="words" rows="3" cols="60">Enter Comment</textarea>
<input type="button" onclick="getwords()" value="Comment" /> <br>
<details id="details"><summary><center>View Comments</center></summary><div id="para"></div></details>
</form>

<script type="text/javascript">
function getwords() {
  text = words.value;
  document.getElementById("para").innerHTML += '<div>'+text
  document.getElementById("words").value = "Enter Comment"
}
</script>

</ul>

Answer 1

删除resize none属性，使其不会增加大小。

textarea {
   resize : none; /* Remove this */
}

Answer 2

如果您希望它显示滚动条，则必须将overflow : none更改为overflow : auto

Answer 3

将溢出属性添加到段

#para {
    display : block;
    overflow : auto;
    height : 200px;
    width : 100%;
    resize : none;
    }

您忘记将结束标记添加到JS字符串

<script type="text/javascript">
function getwords() {
  text = words.value;
  document.getElementById("para").innerHTML += '<div>'+ text + '</div>' 
  document.getElementById("words").value = "Enter Comment"
}
</script>

Answer 4

给它的包装器div赋予属性

overflow: scroll;

在您的CSS代码

上

HTML评论框自动不增加高度

4 个答案: