我的容器內有一個輸入和一個文本區域，該容器的height: 52.5vh. 我希望文本區域從輸入的正下方開始并擴展到容器的末尾。我怎樣才能這樣做呢？順便說一句，這兩個元素都應該填充整個寬度。.contact__user-input { max-height: 52.5vh; height: 52.5vh; overflow: scroll; background-color: yellow;}textarea { background-color: lightgray; border: 1px solid grey; outline: none; color: black; letter-spacing: 0; text-transform: none; box-shadow: none; resize: none; padding: 0.7rem;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><div class="contact__user-input d-flex"> <input type="text" class="form-control" placeholder="Input"/> <textarea class="contact__textarea separator--small h-100 w-100" placeholder="Textarea"></textarea></div>
2 回答
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
您可以flex為父母使用并使其column明智。
.contact__user-input {
max-height: 52.5vh;
height: 52.5vh;
overflow: scroll;
background-color: yellow;
display:flex;
flex-direction:column;
}
textarea {
background-color: lightgray;
border: 1px solid grey;
outline: none;
color: black;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
resize: none;
padding: 0.7rem;
height:auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="contact__user-input d-flex">
<input type="text" class="form-control" placeholder="Input"/>
<textarea class="contact__textarea separator--small h-100 w-100" placeholder="Textarea"></textarea>
</div>
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
為下面的 div 添加了 flex-wrap 類，并更正了 bootstrap cdn url。請檢查片段。
<div class="contact__user-input d-flex flex-wrap">
.contact__user-input {
max-height: 52.5vh;
height: 52.5vh;
overflow: scroll;
background-color: yellow;
}
textarea {
background-color: lightgray;
border: 1px solid grey;
outline: none;
color: black;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
resize: none;
padding: 0.7rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<div class="contact__user-input d-flex flex-wrap">
<input type="text" class="form-control" placeholder="Input"/>
<textarea class="contact__textarea separator--small h-100 w-100 form-control" placeholder="Textarea"></textarea>
</div>
- 2 回答
- 0 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消