Блог

Главная - Вопросы по программированию - Элемент выпадающего меню увеличивается в высоту

Элемент выпадающего меню увеличивается в высоту

#html #css

#HTML #css

Вопрос:

Итак, я разработал дизайн для ввода в Word, как показано ниже:

введите описание изображения здесь

и у меня возникают проблемы в HTML, где по какой-то причине второй выпадающий список соответствует высоте большей высоты текстовой области:

введите описание изображения здесь

Как мне убедиться, что второй выпадающий список соответствует высоте другого выпадающего списка, но не соответствует высоте текстовой области?

 * {
    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>

Кроме того, я открыт для рекомендаций о том, как улучшить этот макет, поскольку текущий подход, который я использую, я должен использовать другое имя класса для второго выпадающего списка из-за наличия большего текстового поля, поэтому я нахожу это странным.

Комментарии:

1. Запуск фрагмента показывает, что два совпадают по размеру

Ответ №1:

По умолчанию align-items установлено значение stretch in flexbox. Чтобы выпадающий список выбора соответствовал высоте текстовой области. Чтобы изменить это, вы можете установить значение flex-start .

 .input_field_big {
  display: flex;
  align-items: flex-start; /* Pack flex items from the start */ 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Ответ №2:

Добавить height: 4vh в выпадающий список, который находится перед текстовой областью. select пытается взять доступную высоту у родительского элемента.