html - 影响 CSS 样式的表单标签

Question

我在 css 方面非常糟糕，只能靠 SO 答案来解决 - 但是我找不到针对这个特定问题的任何解释。

我有一个表单，其中包含一个 textarea 和一个 button(input/submit)，仅此而已，我正在尝试让textarea 填充整个屏幕，除了屏幕最底部的按钮占用的 30px，所以它看起来像这样:

我正在尝试使用 this answer 中描述的 flex 来实现这一点.

我的 body 现在是这样的:

<div class="box">
    <form action="./save.php" method="post">
        <div class="row content">
            <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
        </div>
        <div class="row footer">
            <input type="submit" value="Save Changes." class="btn1">
        </div>
    </form>
</div>

我的 btn1 和 box1 类应用 width:100%; height:100%; 在这两个元素上，一些基本的颜色样式、填充和字体更改，以及 1px 边框。

我剩下的 CSS 看起来像这样

html,body { height:100%; margin:0; }
.box { display:flex; flex-flow:column; height:100%; width:100%; }
.row.header { flex: 0 0 auto; }
.row.content { flex: 1 1 auto; }
.row.footer { flex: 0 0 30px; }

它不起作用，取决于 form 的样式，它要么填充页面的一小部分，要么两个元素各自占据整个页面。

然而，当我从我的 html 中完全删除 form 标签时，一切都会自行修复，并且它的显示和行为完全符合我的预期。

我尝试将 form 标签的样式设置为与 html,body 相同，还尝试将其设置为 hidden，显示为 block 和 inline-block 等，但我似乎无法让它不影响任何东西。

有没有办法让 form 标签完全不影响样式？

Answer 1

form 标签必须是 flex 容器，而不是 .box DIV(.box 的唯一子元素是 form 元素，这样就没有意义了):

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  height: 100%;
}

form {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

.row.header {
  flex: 0 0 auto;
}

.row.content {
  flex: 1 1 auto;
}

.row.footer {
  flex: 0 0 30px;
}

.btn1,
.box1 {
  width: 100%;
  height: 100%;
}

.btn1 {
  background: red;
}

.box1 {
  background: green;
}

<div class="box">
  <form action="./save.php" method="post">
    <div class="row content">
      <textarea rows="1" cols="1" name="document" class="box1">text</textarea>
    </div>
    <div class="row footer">
      <input type="submit" value="Save Changes." class="btn1">
    </div>
  </form>
</div>