提交按钮不是容器的完整高度

Question

我正在尝试使用下面的代码使提交按钮填满其容器的整个高度，但它不会这样做。

.container {
  border: 1px solid;
}
.test {
  height: 100%;
}

<div class="container">

  <div style="float: right;">
    <form method="post">
      <input class="test" type="submit">
    </form>
  </div>

  <div style="float: left; width: 95%;">
    <p>Hello! This is an example... by the way, I'm from outer space!</p>
  </div>

  <div style="clear: both;"></div>

</div>

JsFiddle：https://jsfiddle.net/3apqb869/1/

Answer 1

对这些情况使用position（也支持IE 7，因为不支持Flexbox）：

＆＃13;

＆＃13;

.container {
  border: 1px solid;
  position: relative;
  padding-right: 70px;
}
.test {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 65px;
}

＆＃13;

<div class="container">

  <div>
    <form method="post">
      <input class="test" type="submit">
    </form>
  </div>

  <div style="float: left; width: 95%;">
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p>
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p>
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p>
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p>
  </div>

  <div style="clear: both;"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

我喜欢使用flexbox这样的东西。只要你放弃对IE＆lt; = 10的支持就可以了，它可以让这样的样式更加容易。如果不是，也可以使用polyfills。

https://jsfiddle.net/3apqb869/3/

.container {
  display: flex;
  //implicit flex-direction: row;
}

.right {
  display: flex;
  flex-direction: column;
}

Here's a great guide to flexbox

Answer 3

您可以将display: table与table-cell结合使用以达到所需的行为[提交按钮需要绝对定位并且宽度必须固定这样按钮文本就不会溢出并被截断]。

优点：

display:table和display:table-cell在现代浏览器和经典浏览器中得到了坚实的支持（我不会说旧）

缺点： 投票的人应该对此发表评论。

＆＃13;

＆＃13;

.container {
  background: #fff;
  display: table;
  width:100%;
}

.container >div {
  display: table-cell;
}

.submit-wrapper {
  position: relative;
  width:100px;
}

.test {
  position: absolute;
  top: 0;
  bottom: 0;
}

＆＃13;

<div class="container">
  <div >
    <p>Hello! This is an example... by the way, I'm from outer space! I'm from outer space!</p>
  </div>
  <div class="submit-wrapper">
    <form method="post">
      <input class="test" type="submit">
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/3apqb869/10/