窗體標籤影響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>