Question

我目前正在使用Foundation重新设计网站。重新设计的网站将在标题上有一个searh栏，问题是我试图获得输入和按钮具有相同的高度而不使用任何类型的固定高度，因为这种布局必须是响应。这是我的代码：

    <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即可。使用百分比的技巧是你必须通过使用像素或使用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%;
}

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

当然，您可能不希望在您的情况下指定正文的高度，但它也可能是.row。

您可能会想，我不想指定更高的高度，但我希望孩子们以百分比为基础。但是如果你考虑一下，父母的高度基于孩子，以便它可以包装所有这些。如果您不打算指定高度，那么父母的高度就是基于。如果你想让孩子的身高达到父母身高的50％，并且说只有一个孩子，那么父母的身高也必须缩小，这只会让它递归并且不可能。

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

1 个答案: