Responsive form - controlling height of a textarea - html

Question

I've got this HTML form:
<form method="post" action="#" class="cf">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>
And this is my CSS:
/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
form > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
background: rgba(255, 0, 0, .2);
}
.right {
background: rgba(0, 255, 0, .2);
}
form {
background: #ccc;
}
input[type="text"],
textarea {
width: 100%;
border: none;
}
input[type="text"] {
margin-bottom: 10px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
#media only screen and (min-width: 600px) {
form {
background: rgba(0, 0, 255, .3);
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
input[type="submit"] {
clear: both;
}
}
Fiddle
http://jsfiddle.net/gRRmh/
Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working.
The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.
Setting it to height: 100%; does not work for two reasons:
The height of the label needs to be taken into account. Sure I could just give it a height in percentages and subtract that value from the textarea's height (10% / 90%) ...
...but for this to work, one parent elements needs a fixed height, so I need to give the form e.g. a height of 200px. The problem with that is I actually need to match the height of the left column by hand which isn't really a good solution.
So what I am actually looking for is something like the following, just without nudging pixels by hand:
(also with fiddle if you want, but please note: Its a bit messy. http://jsfiddle.net/mnBEh/1/)
How to solve this problem?

Answer 1

It is only posible by giving manually height to textarea.So give height to textarea on media queries.

Answer 2

Try this. It uses CSS tables, but I think it gets the result you're looking for, by setting the textarea to be 100% height, and then minusing the height of it's label. But for some reason, the height is only calculating correctly in Chrome, even though the other browsers supposedly support it.
http://jsfiddle.net/73cyorL1/
CSS:
.table {
display: table;
width: 100%;
}
.row {
display:table-row;
width: 100%;
}
.left {
background: red;
}
.right {
background: blue;
}
label {
display: block;
padding: 10px;
font-family: arial;
font-style: italic;
font-size: 0.75em;
line-height: 1em;
}
form {
background: grey;
}
input[type="text"], textarea {
width: 100%;
border: none;
background: #ccc;
font-family: arial;
padding: 10px;
box-sizing: border-box;
display: block;
}
input[type="text"]:focus, textarea:focus {
outline: 0;
background: #ddd;
}
input[type="submit"] {
display: block;
margin: 10px;
padding: 10px;
cursor: pointer;
}
#media only screen and (min-width: 600px) {
.left {
width: 50%;
height: 100%;
display: table-cell
}
.right {
width: 50%;
height: 100%;
display: table-cell;
overflow: hidden;
}
textarea {
height: calc(100% - 0.75em);
/* 100% fill height, minus height of details label */
}
}
HTML:
<form method="post" action="#" class="table">
<div class="row">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required="required" class="last" />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>

Answer 3

Set "box-sizing: border-box;" and it will works