我已经尝试了一段时间让我的代码工作。我试图让一个文本区域占据整个页面，除了一些不调整大小的导航栏。我让它工作正常，但滚动条被部分遮挡，所以我必须让文本区域占据开放空间而不是使用填充来避免导航栏。
这是我的 HTML:
<body>
<div id="topbar"></div>
<div id="tabbar"></div>
<div id="sidebar"></div>
<textarea wrap="off" id="maintext" autofocus="autofocus"> </textarea>
</body>
这是我的 CSS:
#topbar{
position: fixed;
top: 0px;
right: -1px;
left: -1px;
border: 1px solid black;
height: 35px;
background: black;
z-index: 1;
}
#tabbar{
position: fixed;
right: -1px;
left: -1px;
height: 20px;
background: grey;
margin: 29px auto;
border: 1px solid grey;
z-index: 2;
}
#sidebar{
position: fixed;
height: 100%;
left: 0px;
width: 15px;
margin: 51px auto;
border: 1px solid lightgrey;
background: lightgrey;
z-index: 3;
}
#maintext{
position: fixed;
right: 0px;
bottom: 50px;
left: 0px;
top: 58px;
margin-left: 20px;
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
padding-top: 5px;
padding-left: 0px;
}
最佳答案
IE8+(首选)
这是一个完整显示 textarea 的粗略示例(即没有任何内容被剪裁):http://jsfiddle.net/UvJAM/1/
可以对其进行修改以完全按照您的要求执行，但需要注意使用 box-sizing，IE7 及以下版本不支持它。
我还在 textarea 周围添加了一个包装器，以便可以使用填充来管理顶部/底部偏移。
<div id="textwrapper">
<textarea wrap="off" id="maintext" autofocus="autofocus"></textarea>
</div>
IE7
此模型不太灵活，因为它限制了 textarea 的样式，即任何填充或边框都会破坏它。但是，它确实支持 IE7(至少在仿真模式下)。也适用于 IE9 和 Chrome。
重要的部分是使用 4 部分位置语句来实现 100% 的高度和宽度。
top: 0;
right: 0;
bottom: 0;
left: 0;
关于html - 如何与其他不可调整大小的框一起使用可调整大小的文本区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11621453/