CSSのスタイリングに影響を与えるフォームタグ

Question

私はCSSでかなりひどいので、SO答えでしか得られませんが、この特定の問題については何の説明も見つかりません。

私は、私は textareaは、画面の一番下にあるボタンで取り上げ30px以外の画面の全てを埋める必要があり、1つ textareaと1 button持つフォーム（ input/submit）、他には何をしようとしている

私は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クラスは、両方の項目にいくつかの基本的なカラースタイリング、パディングとフォントの変更だけでなく、1ピクセルの境界線をwidth:100%; height:100%;を適用します。

私の残りの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のスタイリングによっては、動作しません。

しかし、formタグをHTMLから削除すると、すべてがすべて修正され、予想どおりに表示され、正しく動作します。

私も、しかし、私はそれが何に影響を与えないように見えることはできませんblockとinline-blockなどとして表示し、hiddenにそれを設定しようとした、html,bodyと同じformタグをスタイリングしようとしました。

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>