javascript - 如何扩展文本区域以填满页面

标签 javascript html css textarea

我有一个非常简单的 html 页面,带有一个顶部栏和一个文本区域。我希望文本区域填满顶部栏留下的高度。调整大小后需要自动调整。

例如

<html>
<body>
  <div id="top" />
  <textarea id="text" />
</body>
</html>

我尝试了很多东西,但我总是得到两个滚动条(一个用于文本区域,一个用于正文)。

最佳答案

如果你有一个固定高度的顶栏,你可以在你的文本区域使用绝对位置来填充剩余的区域,如下所示:

body {
    margin: 0;
}
#top {
    color: #ffffff;
    background: #333399;
    height: 50px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#text {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    resize: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
<div id="top">Top</div>
<textarea id="text">Textarea</textarea>

关于javascript - 如何扩展文本区域以填满页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25880903/

相关文章:

html - 将值从 Django View 传递到 AngularJS 插入的模板

javascript - 在 jquery 中突出显示相似的 rel 属性

javascript - Node Js Express 路由器不工作

javascript - 如何使用 javascript API 获取观看次数最多的 youtube 视频?

Javascript 正则表达式类名问题

html - 正文标签未与顶部位置对齐

javascript - Kendo UI Treeview 折叠所有项目并仅展开当前节点

javascript - 在事件类中包含 javascript 菜单

html - 如何在android中的文本上添加阴影?

html - CSS 翻译在 SVG g 上的 IE11 中不起作用