2

我一直在尝试让我的代码正常工作。我试图让一个 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;
}
4

2 回答 2

1

IE8+（首选）

这是一个粗略的示例，它textarea完全显示（即没有任何内容被剪辑）：http: //jsfiddle.net/UvJAM/1/

可以对其进行修改以完全按照您的意愿进行操作，但需要注意 using 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;
于 2012-07-24T00:00:41.997 回答
0

DIVTextArea在 CSS 样式方面，s比 s 灵活得多。也许您可以考虑使用DIV带有contentEditable属性的 a（参见此处：https ://developer.mozilla.org/en/HTML/Content_Editable ）。它是一个 HTML5 标准，但在更旧的浏览器（IE6、FF3.5）中得到了惊人的良好支持，但很少使用。

但是，如果您确实想继续使用 a ，我认为textarea对您的 CSS 进行以下修改可以#maintext实现您想要的。您将宽度和高度设置为 100%，这实际上使文本区域与正文一样宽和高。所以当你定位它时，它实际上会溢出页面。

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

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

于 2012-07-23T23:37:15.940 回答