我正在尝试为文本区域设置自定义工具栏,我有以下内容
html:
<div id="main">
<div id="toolbar"></div>
<textarea></textarea>
</div>
CSS:
#main {
background-color: #ddd;
height: 400px;
width: 400px;
position: relative;
}
#toolbar {
background-color: #444;
height: 40px;
color: white;
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
它在 Chrome 中完全按照我的预期工作,但在 firefox 中/即文本区域没有占用 div 中的所有可用空间。
我该如何设置它,使工具栏占据 div 顶部的 40px,而文本区域占用所有剩余的高度。
我正在动态调整这些东西的大小,所以不能为文本区域使用“px”高度或宽度。
最佳答案
更好的建议
将文本区域的宽度和高度设置为 100%。然后,给它一个 40px 的透明顶部边框(实际上颜色并不重要)。请务必将 box-sizing 设置为 border-box。现在将相关工具栏放在更高的 z-index - 瞧。
笔:http://codepen.io/anon/pen/nFfam
老歌
与其向下移动文本区域,不如向上移动工具栏:
#main {
background-color: #ddd;
height: 200px; width: 400px;
position: relative;
top: 40px;
}
#toolbar {
background-color: #444;
height: 40px; width: 100%;
position: absolute;
top: -40px;
}
textarea {
width: 100%; height: 100%;
box-sizing: border-box;
}
关于html - 设置 textarea 以占用 div 中的所有可用空间(减去顶部的 N 像素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14252329/