在 textarea 上遇到 min-height 问题答案

【问题标题】：Having issues with min-height not working on textarea在 textarea 上遇到 min-height 问题
【发布时间】：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>

不胜感激。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：