Html 如何将可调整大小的文本区域与其他不可调整大小的框一起使用？_Html_Css_Textarea

Html 如何将可调整大小的文本区域与其他不可调整大小的框一起使用？

html css

Html 如何将可调整大小的文本区域与其他不可调整大小的框一起使用？,html,css,textarea,Html,Css,Textarea,我一直在努力让我的代码正常工作。我试图让一个文本区域占据整个页面，除了一些不调整大小的导航栏。我让它工作得很好，但是滚动条被部分屏蔽了，所以我必须让文本区域占据开放空间，而不是使用填充来避免导航条这是我的HTML： <body> <div id="topbar"></div> <div id="tabbar"></div> <div id="sidebar"></div> <textarea wrap="

我一直在努力让我的代码正常工作。我试图让一个文本区域占据整个页面，除了一些不调整大小的导航栏。我让它工作得很好，但是滚动条被部分屏蔽了，所以我必须让文本区域占据开放空间，而不是使用填充来避免导航条

这是我的HTML：

<body>
<div id="topbar"></div>
<div id="tabbar"></div>
<div id="sidebar"></div>
<textarea wrap="off" id="maintext" autofocus="autofocus"> </textarea>
</body>

当谈到CSS样式时，

DIV

s比

TextArea

s灵活得多。也许您可以考虑使用<代码> div <代码>使用<代码> CordeNeabd属性（参见此处：）。它是HTML5标准，但令人惊讶的是，它在更老的浏览器（IE6、FF3.5）中得到了很好的支持，但很少使用

但是，如果您确实想继续使用

textarea

，我认为对

#maintext

CSS的以下修改可以满足您的需要。将宽度和高度设置为100%，这实际上使文本区域与正文一样宽和一样高。所以当你定位它时，它实际上会溢出页面

#maintext{
position: fixed;
right: 0px;
bottom: 0px;
left: 20px;
top: 58px;
border: none;
outline: none;
resize: none;
padding-top: 5px;
padding-left: 0px;
}

有关可编辑内容的更多详细信息，请参见：

IE8+（首选）下面是一个粗略的示例，它完全显示了

textarea

（即没有任何内容被剪裁）：

可以对其进行修改以完全满足您的需要，但需要注意的是使用

框大小调整

，这在IE7及以下版本中不受支持

我还在

textarea

周围添加了一个包装器，这样就可以通过填充来管理顶部/底部偏移

<div id="textwrapper">
    <textarea wrap="off" id="maintext" autofocus="autofocus"></textarea>
</div>

<div id="textwrapper">
    <textarea wrap="off" id="maintext" autofocus="autofocus"></textarea>
</div>

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;