时间戳

首页 > 解决方案 > 下拉菜单元素的高度增加

html - 下拉菜单元素的高度增加

问题描述

所以我起草了一个文字输入设计，如下所示：

在此处输入图像描述

我在 HTML 中遇到问题，由于某种原因，第二个下拉列表跟随较大的 textarea 高度的高度：

在此处输入图像描述

我如何确保第二个下拉列表遵循另一个下拉列表的高度，但不遵循 textarea 的高度？

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

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

body {
    height: 100%;
}

.input_field {
    margin-top: 1vh;
    display: flex;
}

.input_field_big {
    margin-top: 1vh;
    display: flex;
}

.dd {
    width: 35%;
    border-radius: 5px;
    cursor: pointer;
}

.in {
    margin-left: 7%;
    width: 300px;
    min-height: 4vh;
}

#summ_in {
    vertical-align: top;
    min-height: 18vh;
    width: 300px;
    margin-left: 7%;
}

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 class = "input_field">
    <select id = "d1" name = "Name" class = "dd">
      <option value = "Name">Name</option>
    </select>
    <input type = "text" id = "name_in" class = "in" spellcheck="false">
  </div>
  <div class = "input_field_big">
    <select id = "d2" name = "Summary" class = "dd">
      <option value = "Summary">Summary</option>
    </select>
    <textarea id = "summ_in" spellcheck="false"></textarea>
  </div>
  <div class = "input_field">
    <select id = "d3" name = "Stream" class = "dd">
      <option value = "Stream">Stream</option>
    </select>
    <input type = "text" id = "stream_in" class = "in" spellcheck="false">
  </div>
</body>
</html>

另外，我愿意就如何更好地实现这种布局的建议作为我正在使用的当前方法，由于文本区域较大，我必须为第二个下拉列表使用不同的类名，因此我觉得很奇怪必须这样做。

标签： htmlcss

解决方案

添加height: 4vh到 textarea 之前的下拉列表。select 正在尝试从父级获取可用高度。

推荐阅读