我在 css 方面非常糟糕,只能靠 SO 答案来解决 - 但是我找不到针对这个特定问题的任何解释。
我有一个表单,其中包含一个 textarea
和一个 button
(input/submit
),仅此而已,我正在尝试让textarea
填充整个屏幕,除了屏幕最底部的按钮占用的 30px,所以它看起来像这样:
我正在尝试使用 this answer 中描述的 flex 来实现这一点.
我的 body 现在是这样的:
<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
标签完全不影响样式?
最佳答案
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>
关于html - 影响 CSS 样式的表单标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46218904/