在 textarea 上遇到 min-height 问题

Posted

技术标签:

【中文标题】在 textarea 上遇到 min-height 问题【英文标题】：Having issues with min-height not working on textarea 【发布时间】：2021-03-17 18:23:54 【问题描述】：

我的 html 页面中有以下内容：

它是一个 div，其中包含一个 标签“名称” 和一个 其下方高度为 30vh 的文本区域。

每当我调整浏览器的高度时，我都希望保持文本区域的高度不会自行调整大小。现在，当我明智地调整浏览器窗口的高度时，它正在调整大小：

我已经阅读了有关“最小高度”的信息，因此我将 最小高度设置为 30vh，同时希望它可以防止 textarea 调整高度，但它不起作用。 p> 

* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


html 
    height: 100%;
    font-size: 1vw;


body 
    height: 100%;


#output2 
    height: 90vh;
    width: 25%;
    border: 1px solid black;


#name_field 
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;


#name_box 
    height: 30vh;
    min-height: 30vh; /*defined min-height here*/
    width: 95%;


textarea 
    resize: none;

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "output2">
    <div id = "name_field">
        Name
        <textarea id = "name_box" disabled></textarea>
    </div>
</div>
</body>
</html>

不胜感激。

【问题讨论】：

【参考方案1】：

而不是在“相对单位”中设置min-height属性的值（在本例中为vh ),在“绝对单位”中设置min-height属性的值，如px,mm等。 这样，你就可以解决这个问题了。希望你理解！ 这是一个更正（只需将 #name_box 选择器放在 css 中）：

<!DOCTYPE html>
<html lang="en">  
<head>
<style>
* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


html 
    height: 100%;
    font-size: 1vw;


body 
    height: 100%;


#output2 
    height: 90vh;
    width: 25%;
    border: 1px solid black;


#name_field 
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;


#name_box 
    height: 30vh;
    min-height: 50px; /*Line to focus*/
    width: 95%;


textarea 
    resize: none;

</style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "output2">
    <div id = "name_field">
        Name
        <textarea id = "name_box" disabled></textarea>
    </div>
</div>
</body>
</html>

【讨论】：

以上是关于在 textarea 上遇到 min-height 问题的主要内容，如果未能解决你的问题，请参考以下文章

textarea自适应高度

textarea高度自适应

div模拟textarea文本域轻松实现高度自适应

自定义CSS以允许chrome textarea调整大小小于初始状态？

如何让用户将 html 输入到 textarea 中？如果他们尝试将 <textarea> 包含在文本区域中，我会遇到问题

在 textarea 中显示 PHP 查询结果