表单标签会影响CSS样式

Question

我在CSS方面非常糟糕，只能靠SO回答-但是我找不到针对此特定问题的任何解释。

我有一个带有一个textarea和一个button的表单（ input/submit ），没有别的，我试图让textarea填满整个屏幕，除了屏幕最底部的按钮占用了30px以外，看起来像这样：

我正在尝试使用此答案中所述的flex实现此目的 。

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

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