I'm pretty terrible at css, and get by only on SO answers - however I can't find any explanation for this specific issue.
I have a form with one textarea
and one button
(input/submit
), nothing else, I'm trying to have the textarea
fill all of the screen except for the 30px taken up by the button at the very bottom of the screen so it looks something like this:
I'm trying to achieve this using flex as described in this answer.
my body currently looks like this:
<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>
my btn1
and box1
classes apply width:100%; height:100%;
on both items, some basic color styling, padding and font changes, as well as a 1px border.
my remaining css looks like this
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; }
it doesn't work, depending on the styling of form
it either fills a small amount of the page, or both elements each take up a full page.
however when I remove the form
tag from my html entirely everything fixes itself and it displays and acts exactly as I would have expected.
i've tried styling the form
tag the same as html,body
, also tried setting it to hidden
, displaying as block
and inline-block
etc. however I can't seem to get it to not affect anything.
Is there a way I can make the form
tag not affect styling at all?