input设置高度跟随view

在HTML和CSS中，要让`<input>`元素的高度跟随其包含的视口（通常是个`<div>`或者其他响应式的容器），可以采用几种方法：

1. **CSS Flexbox**: 可以将包含`<input>`的容器设置为`display: flex;`，然后给`<input>`设置`flex: 1;`，使其占据剩余空间。这样，当父容器高度改变时，`<input>`高度会相应调整：

<div class="container" style="display: flex; flex-direction: column;">
  <input type="text" placeholder="输入" />
</div>

2. **CSS Grid**: 类似于Flexbox，也可以使用CSS Grid布局。将`<input>`放入网格单元格中，设置`grid-row: 1;`让它充满一整行，高度随容器自动调整：

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
}

3. **Vue.js计算属性**: 如果是在Vue项目中，可以在`data`中定义一个响应式变量来保存视口高度，并在组件的计算属性中计算`input`的高度。例如：

new Vue({
  el: '#app',
  data: {
    viewBoxHeight: 0,
    inputHeight: ''
  },
  watch: {
    viewBoxHeight: function(newViewBoxHeight) {
      this.inputHeight = `${newViewBoxHeight}px`;
    }
  }
})

然后在模板里绑定计算后的`inputHeight`到`input`的样式：

<div ref="viewContainer" @resize="updateInputHeight"></div>
<input :style="{ height: inputHeight }" type="text" />

这里假设你有个ref叫`viewContainer`用于获取视口高度。