用于显示区域的CSS滚动条

Question

我是CSS HTML的新手。我有一个小问题，我需要帮助。

我在CSS中定义了以下标记，用于显示一组问题的显示区域。我为显示区域画了一个静态边框，但有时显示区域内的文字超出了高度并流出。我想通过添加滚动条并为我的显示区域定义适当的高度来解决这个问题。我可能仍然不清楚我的问题。所以我插入了一张图片作为参考。

  #disp_desc{
            position: absolute;
            COLOR:cyan;
            font-size:16px;
            font-family: Verdana;
            width: 55%;
            top: 255px;
            left: 215px;
            margin-left: ;
            margin-right: ;
            text-align: left;
            overflow-y: scroll;
   }

<div id="problemform" class="form-inline">
        <textarea id="probleminput" class="form-inline" type="text" style="display: inline;"></textarea>
        <button id="problemsubmit" class="btn" type="submit" style="display: inline-block;">Submit</button>
    </div>

First Contact是我的显示区域。忽略内容和输入框。我只想使用滚动条将整个文本放入定义的边框内。

此外，我希望仅在文本大小足够大时才显示滚动条。否则，即使对于1-2行的内容也会显示，滚动条对于相同的内容没有意义。我可以用CSS控制吗？

Answer 1

您的#disp_desc元素没有指定height，并且绝对定位它没有任何东西可以假定高度。因此，您的元素根本不受高度限制，并且会继续增长。

要解决这个问题，只需给它一个高度：

#disp_desc {
    ...
    height: 100px;
}

Answer 2

位置：绝对;工作非常不稳定，我建议调查位置：相对;这将允许您在HTML中执行类似的操作：

HTML：

<div class="cyanBox">
    <div id="disp_desc">
        //THIS IS WHERE YOUR TEXT WILL GO
    </div>
</div>

CSS：

.cyanBox
{
    position: relative; //Adjust with margins if needed.
    height: 150px;
    width: 500px;
    overflow: auto;
]

#disc_desc
{
    position: relative;
    height:100%; //Setting position relative with height and width 100% will
    width:100%;  //Cause the description to fill the box, and with overflow Auto
    //Font Styling. //On the box, when it is too long a scroll will be made.
}