影响css样式的表单标签

Question

我在css上非常糟糕，只能通过SO答案 - 但我找不到任何有关此特定问题的解释。

我的表单包含一个textarea和一个button（input/submit），没有别的，我正试图让textarea填充所有屏幕除外对于屏幕最底部按钮占用的30px所以它看起来像这样：

我正在尝试使用flex来实现这一点，如this answer中所述。

我的身体目前看起来像这样：

<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标记必须是灵活容器，而不是.box DIV（.box唯一的子元素是form元素，因此不会＃39; t that that）：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;