将"textarea"高度保持为"100%"是无效的

Question

我将一些输入元素保留在左列中，而在只有textarea的右列中，我试图将100%的高度添加到与左列相等的高度。但由于某种原因，它不起作用。

.popup {
border: 1px solid red;
background: rgba(000, 000, 000, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
form,
fieldset {
padding: 0;
margin: 0;
border: 0;
}
form {
display: flex;
flex-wrap: wrap;
border: 1px dotted gray;
width: 25rem;
}
fieldset {
width: 50%;
background: #333;
padding: 0.5em;
margin: 0;
box-sizing: border-box;
}
form label {
display: block;
width: 100%;
margin-bottom: 1rem;
}
form label input,
form label textarea {
width: 100%;
background: white;
border: 1px solid gray;
}
textarea {
border: 1px solid blue;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.submit-form {
flex-basis: 100%;
text-align: right;
background: tan;
}

<div class="popup">
<div class="pop-form">
<form>
<fieldset>
<label htmlFor="name"><input type="text" name="name" id="name" /></label>
<label htmlFor="email"><input type="email" name="email" id="email" /></label>
<label htmlFor="phone"> 
<input type="tel" name="phone" 
autoComplete="off"
placeholder="Phone" id="phone"/> </label>
</fieldset>
<fieldset>
<label class="message" htmlFor="message">
<textarea placeholder="Message" 
autoComplete="off"
name="message" id="message"></textarea></label>
</fieldset>
<div class="submit-form">
<button>Submit</button>
</div>
</form>
</div>
</div>

Answer 1

将其添加到样式.message{ height:100% }中。请检查以下代码段。

.popup {
border: 1px solid red;
background: rgba(000, 000, 000, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
form,
fieldset {
padding: 0;
margin: 0;
border: 0;
}
form {
display: flex;
flex-wrap: wrap;
border: 1px dotted gray;
width: 25rem;
}
fieldset {
width: 50%;
background: #333;
padding: 0.5em;
margin: 0;
box-sizing: border-box;
}
form label {
display: block;
width: 100%;
margin-bottom: 1rem;
}
form label input,
form label textarea {
width: 100%;
background: white;
border: 1px solid gray;
}
textarea {
border: 1px solid blue;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.submit-form {
flex-basis: 100%;
text-align: right;
background: tan;
}
.message {
height: 100%
}

<div class="popup">
<div class="pop-form">
<form>
<fieldset>
<label htmlFor="name"><input type="text" name="name" id="name" /></label>
<label htmlFor="email"><input type="email" name="email" id="email" /></label>
<label htmlFor="phone"> 
<input type="tel" name="phone" 
autoComplete="off"
placeholder="Phone" id="phone"/> </label>
</fieldset>
<fieldset>
<label class="message" htmlFor="message">
<textarea placeholder="Message" 
autoComplete="off"
name="message" id="message"></textarea></label>
</fieldset>
<div class="submit-form">
<button>Submit</button>
</div>
</form>
</div>
</div>