如何调整输入的高度，使其与提交的高度匹配

Question

我目前正在使用 Foundation 重新设计网站。重新设计的网站在标题上会有一个搜索栏，问题是我试图在不使用任何固定高度的情况下让输入和按钮具有相同的高度，因为这种布局必须是响应式的。 这是我的代码：

    <div class="row">

      <div class="small-9 columns">
        <div class="radius panel">

        <form>
          <div class="row collapse">

            <div class="small-10 columns left" >
              <input type="text" />
            </div>

            <div class="small-2 columns right tiny" >
              <a href="#" class="button expand">Search</a>
            </div>

          </div>
        </form>

      </div>
      </div>

    </div>

  <!-- End Search Bar -->

Answer 1

很简单，只需使用height。使用百分比的诀窍是您必须在somewhere 指定绝对高度，可以使用像素，也可以使用position: absolute 或position: fixed。百分比必须基于某些父母的身高，否则当您说 50% 时，50% 是什么？

例如看这个Fiddle：

body {
    position: absolute;
    height: 100%;
}
form {
    position: relative;
    height: 50%;
}
input[type="text"] {
    height: 100%;
}
input[type="submit"] {
    height: 100%;
}

我指定了body的高度，在100%处设置为position: absolute。这是所有后代都将依据的标准。现在，form 占了其中的 50%，两个输入占了整个表单的高度。

当然，你可能不想在你的案例中指定身体的高度，但它也可能是.row。

您可能会想，好吧，我不想指定更高的高度，但我希望孩子们是基于百分比的。但是如果你仔细想想，父母有高度基于孩子，所以它可以包裹所有的孩子。如果您不打算指定高度，那么这就是所有父级高度的基础。如果您希望孩子的身高是父母身高的 50%，并且说只有一个孩子，那么父母的身高也必须缩小，这只会使其递归且不可能。