所以我试图让我的 textarea 高度到达页面底部。
问题是,下面的代码在 Chrome 中有效,但不适用于 Safari。我尝试添加供应商前缀,但没有任何变化。
我也在使用 Bootstrap。
HTML
<div class="container">
<div class="row twenty-percent">
<div id="address" class="col-xs-9 col-xs-offset-3">
<div class="row row1">
<div class="col-xs-6">
<label class="sr-only" for="exampleInputName2" required>Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
</div>
<div class="col-xs-6">
<label class="sr-only" for="exampleInputEmail3" required>Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
</div>
<div class="row row2">
<div class="textareaWrapper col-xs-12">
<textarea placeholder="Your enquiry" id="message" class="form-control" required></textarea>
</div>
</div>
<div id="submit">
disqus
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
.container,
.twenty-percent,
#address {
height: 100%;
}
#address {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.row1 {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.row2 {
display: -webkit-flex;
display: flex;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}
.textareaWrapper {
height: 100%;
display: -webkit-flex;
display: flex;
}
textarea {
height: 100%;
/* resize is optional */
resize: none;
}
#submit {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
最佳答案
从 textAreaWrapper 中移除 height: 100%
。仍然适用于两者。
关于html - 柔性 : Textarea height worked in Chrome but not Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41700665/