Блог

Главная - Вопросы по программированию - Как я могу изменить размер высоты элемента в CSS или Javascript?

Как я могу изменить размер высоты элемента в CSS или Javascript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть выпадающее меню, которое находится внутри окна. Я хочу, чтобы выпадающее меню заполнило все поле. Ширина заполняет все поле, но, похоже, я не могу найти способ изменить высоту выпадающего меню.

Я пытался использовать height и возиться с заполнением, но нигде не могу найти ответа.

 <div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

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

1. Можете ли вы добавить соответствующий CSS. Без этого размер вашего содержащего поля автоматически будет соответствовать высоте содержимого.

2. Можете ли вы добавить css тоже?

Ответ №1:

  <select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

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

Ответ №2:

Я модифицирую anwser от Deepshika

 $("#select-height").focus(function () {
      this.size=10;
      $(this).css({"height":"200px", "position":"absolute"});
})
$("#select-height").blur(function () {
  this.size=1;
  $(this).css({"height":"40px", "position":"inherit"});
});  
 #select-height{
  height:40px;
  z-index:1;
  width:200px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>start</div>
<select id="select-height" 
onchange='this.size=1; this.blur();'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
     <option>12</option>
     <option>13</option>
     <option>14</option>
     <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
  </select>
  <div>Last</div>

Живая демонстрация

Ответ №3:

Возможно, это то, что вам нужно:

 #main_dropdown_menu{
  height: 200px;
  background: grey;
}
#main_dropdown{
  height: 100%;
}  
 <div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

Ответ №4:

Вы можете просто установить высоту поля выбора в CSS:

 select.dropdown_list {
  height: 30px;
}  
 <div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

Ответ №5:

Этот CSS сделает свое дело, адаптируясь к вашим требованиям.

 select {
   height: calc(1.5em   .75rem   2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}