可由用户

Question

我想...好好看看SO答案框。这就是我正在寻找的行为 - 文本溢出时会出现滚动条，但用户可以手动调整大小。

我的问题是，是否可以使用CSS本地执行此类操作？ 使用我当前的设置，最初div很小（小于最大高度），我可以调整它，但只能在当前文本高度和最大高度之间。当插入更多文本并显示滚动条时，我根本无法更改它的大小。

CSS

element.style {
    resize: vertical;
    max-height: 200px;
    overflow: auto;
    padding: 10px;
}

更确切地说，我希望跟随发生：

• 如果文本的高度小于定义的最大高度，则元素将其大小设置为文本完全可见所需的最小值（无滚动条）。 - 作品
• 如果文本高度超过定义的最大高度，则元素将采用max-height，并且将出现滚动条。 - 作品
• 如果用户不想看到滚动条或只想一次看到更多文字，他可以将元素调整到任何所需高度，最大高度将采用新高度作为其值。 - 不能工作，用户无法调整超过最大高度。

编写JS可能比编写这个问题更快，但我希望这对静态html页面有这样的行为。

Answer 1

这是您正在寻找的造型吗？
例如：

＆＃13;

＆＃13;

#element {
    resize: vertical;
    height: auto;
    min-height:200px;
    resize: vertical;
    overflow: auto;
    padding: 10px;
    width: 95%;
    border:1px solid;
}

＆＃13;

<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>

＆＃13;

＆＃13;

＆＃13;