gpt4 book ai didi

html - 如何与其他不可调整大小的框一起使用可调整大小的文本区域?

转载 作者:行者123 更新时间:2023-11-28 02:05:51 24 4
gpt4 key购买 nike

我已经尝试了一段时间让我的代码工作。我试图让一个文本区域占据整个页面,除了一些不调整大小的导航栏。我让它工作正常,但滚动条被部分遮挡,所以我必须让文本区域占据开放空间而不是使用填充来避免导航栏。

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

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

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

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

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

关于html - 如何与其他不可调整大小的框一起使用可调整大小的文本区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11621453/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com