问问题
25277 次
3 回答
18
您可以使用 flexbox 根据其父级设置您的 textarea 高度。
HTML
<div class="container">
<div class="btn-wrapper">
<button>X</button>
</div>
<textarea></textarea>
</div>
CSS
.container {
height: 220px;
width: 220px;
background-color: pink;
display: flex;
flex-direction: column;
}
.container textarea {
box-sizing: border-box; /* fit parent width */
height: 100%;
}
于 2015-02-04T18:12:31.517 回答
1
你为什么使用display: table-row;
声明?没有必要这样做。删除display: table-row;
声明,在你的 textarea 选择器中添加一个box-sizing: border-box;
声明,你就完成了:
.container
{
height: 220px;
width: 220px;
background-color: pink;
}
.container > textarea
{
width: 100%;
height: 100%;
background-color: cyan;
box-sizing: border-box;
}
.container > div
{
width: 100%;
height: 100%;
background-color: cyan;
}
编辑 :
上面的 CSS 使文本区域溢出其父 div。
这是一个更新的答案:
HTML
<div class="container">
<div class="button-wrapper">
<button>X</button>
</div>
<div class="textarea-wrapper">
<textarea></textarea>
</div>
</div>
CSS 2
.container {
height: 220px;
width: 220px;
background-color: pink;
position: absolute;
}
.container textarea {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 0, 0.5);
box-sizing: border-box;
}
.container > div {
background-color: cyan;
}
.container .button-wrapper {
background-color: yellow;
height: 26px;
}
.container .textarea-wrapper {
background-color: green;
position: absolute;
top: 26px;
width: 100%;
bottom: 0;
}
CSS 3(使用 calc 函数)
.container {
height: 220px;
width: 220px;
background-color: pink;
}
.container textarea {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 0, 0.5);
box-sizing: border-box;
}
.container > div {
background-color: cyan;
}
.container .button-wrapper {
background-color: yellow;
height: 26px;
}
.container .textarea-wrapper {
background-color: green;
height: calc(100% - 26px);
}
这是显示两种解决方案的小提琴:
于 2013-08-27T06:42:57.807 回答
0
如果将固定高度设置为,button
则可以使用定位并执行以下操作:
HTML : (移除 br 标签)
<div class="container">
<button>X</button>
<textarea></textarea>
</div>
<div class="container">
<button>X</button>
<div>Text</div>
</div>
CSS
.container {
height: 220px;
width: 220px;
background-color: pink;
display: table;
}
.container > button {
display: table-row;
}
.container > textarea, .container > div {
display: table-row;
border: none; /* if you keep border then textarea will go out of the parent element */
height: 200px; /* hardcoded */
padding: 0px; /* removing padding for chrome */
width: 100%;
background-color: cyan;
}
于 2013-08-27T06:38:14.967 回答