Question

我有以下

＆＃13;

<div>
    <input/><button>button</button>  
</div>

＆＃13;

<div id="main">

＆＃13;

边框只是为了显示div。输入具有可变大小。我已经通过使用10vw作为字体大小证明了这一点。

我希望按钮与输入的高度相同。

我希望div保留在页面的主流中（我认为这可能排除使用绝对定位技巧？）并且我希望解决方案只是CSS。

我不想弄清楚输入的大小 - 无论如何我可以让按钮填充包含div的高度吗？

Answer 1

当然，只需将position:relative添加到div，position:absolute添加到按钮：

div {
  border: 1px solid red;
  position: relative;
}
input {
  font-size: 10vw;
  width: 50%;
}
button {
  height: 100%;
  width: 40%;
  position: absolute;
}

<div>
  <input/>
  <button>button</button>
</div>

如何使用CSS使HTML元素填充动态大小的容器

1 个答案: