窗体标签影响css造型

Question

我在css非常糟糕，只得到SO答案 - 但我找不到任何解释这个具体问题。

我有一个形式，一个textarea和一个button（input/submit），闲来无事，我想有textarea填充所有屏幕除了通过按钮在屏幕的最下方占据的30像素所以它看起来是这样的：

我想这个使用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元素，这样就没有意义）：

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>