HTML注释框自动不增加高度

HTML Comment Box automatically not increasing height

本文关键字：增加 高度 注释 HTML      更新时间：2023-09-26

我从互联网上得到了创建评论框的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>

为包装器赋予div属性

overflow: scroll;
在你的CSS-code

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

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

如果你想让它出现在滚动条中，你必须将overflow : none更改为overflow : auto

添加溢出属性 

#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>
相关文章：