javascript - 保持 `textarea` 高度为 `100%` 不起作用
问题描述
我在左列中保留了一些输入元素,而在右列中只有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>
解决方案
将此添加到 style .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>
推荐阅读
- java - 如何放置不适合任何类的方法
- c# - Sqlite 元数据查询因 Microsoft.Data.Sqlite 失败,可与 System.Data.SQLite 一起使用
- swift - 使用 If 语句处理多个条件
- python - 用于逻辑回归的热编码值和 DataFrame
- ios - CollectionViewCell 滚动到错误的位置
- bash - 从一个文件获取数据到另一个文件(Bash) - Web Scraping
- vba - 在第一个错误条件下选择案例停止
- c# - 拆分具有混合字符和非统一分隔符的字符串
- java - JavaFX 禁用单个 TextField 上的默认操作
- jquery - 如何使数据过滤器属性值可变