Question

我目前正在尝试构建一个响应式网站，并遇到了与selectbox的问题。

我希望选择框与其旁边的响应图像的高度始终相同，图像的高度会根据屏幕大小而变化。

我希望如果我设置了选择框的高度，它只会填充容器，但这似乎不起作用。

将选择框的高度设置为px允许我设置高度，但这不是响应，我想避免在调整大小时创建一个eventlistener来动态设置selectbox高度与图像相同

非常感谢任何帮助。

＆＃13;

div {
  height: 100%;
  display: block;
  overflow: hidden;
}

select {
  float:left;
  height: 100%;
}

img {
  width: 90%;
  height: auto;
}

＆＃13;

<div>
  <select size="4">
    <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>
  </select>
  <img src="http://via.placeholder.com/350x150" />
</div>

＆＃13;

Answer 1

不确定您是否还在寻找解决方案。但我能够通过使用网格来实现这一目标。

我使用了上面的示例，但刚刚更改了一些CSS

div {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 10% 90%;
}

https://jsfiddle.net/jh8u825f/

响应高度

1 个答案: