Question

我一直试着让我的代码工作。我试图让textarea占用整个页面，除了一些不调整大小的导航栏。我让它工作正常，但滚动条被部分阻挡，所以我必须让textarea占用开放空间而不是使用填充来避免导航条。

这是我的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;
}

Answer 1

IE8 +（首选）

这是一个粗略的例子，它完整地显示了textarea（即没有被剪裁）：http://jsfiddle.net/UvJAM/1/

可以对其进行修改，使其完全符合您的要求，但需要注意使用box-sizing，这在IE7及以下版本中不受支持。

我还在textarea周围添加了一个包装器，以便可以使用填充来管理顶部/底部偏移。

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

IE7

http://jsfiddle.net/UvJAM/4/

此模型不太灵活，因为它限制了textarea的样式，即任何填充或边框都会破坏它。但是，它确实支持IE7（至少在仿真模式下）。也适用于IE9和Chrome。

重要的部分是使用4部分位置语句来实现100％的高度和宽度。

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

Answer 2

在CSS样式方面，

DIV比TextArea更灵活。也许您可以考虑使用DIV contentEditable属性（请参阅此处：https://developer.mozilla.org/en/HTML/Content_Editable）。这是一个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;
}

有关此处contenteditable的详细信息：http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable

如何使用其他不可调整大小的盒子来调整文本大小？

2 个答案:

IE8 +（首选）

IE7