当父对象具有最大高度和溢出滚动时，Textarea不会拉伸
基础概念
在CSS布局中，当父元素设置了最大高度（max-height）并且具有溢出滚动（overflow: auto 或 overflow: scroll）时，子元素（如<textarea>）的行为可能会受到限制。<textarea>元素通常会根据内容自动调整大小，但在某些情况下，它可能不会按预期拉伸。
相关优势
- 自动调整大小：
<textarea>可以根据输入内容自动调整高度，提供更好的用户体验。 - 溢出滚动：父元素的溢出滚动属性可以确保内容过多时可以通过滚动查看，避免页面布局被破坏。
类型
- 固定高度：父元素设置固定高度。
- 最大高度：父元素设置最大高度，允许内容在一定范围内扩展。
- 溢出滚动：父元素设置溢出滚动属性，以便在内容超出容器时可以滚动查看。
应用场景
这种布局常见于需要显示大量文本信息的页面，如聊天窗口、代码编辑器、评论区等。
问题原因
当父元素设置了最大高度并且具有溢出滚动属性时，<textarea>可能无法正确地根据内容调整大小，因为父元素的高度限制了<textarea>的扩展。
解决方法
方法一：使用JavaScript动态调整<textarea>高度
可以通过JavaScript监听<textarea>的内容变化，动态调整其高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Auto Resize</title>
<style>
.container {
max-height: 200px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<textarea id="myTextarea" oninput="autoResize(this)"></textarea>
</div>
<script>
function autoResize(textarea) {
textarea.style.height = 'auto'; // Reset height to auto
textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
}
</script>
</body>
</html>方法二：使用CSS Flexbox布局
通过Flexbox布局，可以让<textarea>自动填充父容器的可用空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Auto Resize</title>
<style>
.container {
display: flex;
flex-direction: column;
max-height: 200px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: auto;
}
textarea {
width: 100%;
resize: none; /* Prevent manual resize */
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
<textarea id="myTextarea" oninput="autoResize(this)"></textarea>
</div>
<script>
function autoResize(textarea) {
textarea.style.height = 'auto'; // Reset height to auto
textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
}
</script>
</body>
</html>参考链接
通过上述方法，可以解决父对象具有最大高度和溢出滚动时，<textarea>不会拉伸的问题。
相关·内容
我希望文本区在高度上是可伸展的。但是固定的 防止这种情况发生。 我以为 可以解决这个问题，但正如您在代码片段中看到的那样，它不能解决这个问题。
浏览 17提问于2021-03-02得票数 0
回答已采纳
1回答
我有一个带有div和嵌套div的HTML。嵌套的div的宽度是容器div的一半，但高度是容器div的两倍。容器div在溢出时滚动。="form1" runat="server"> <div id="inner"></div></form>当我<e
浏览 0提问于2012-11-20得票数 0
回答已采纳
最近，我在Opera中遇到了一个问题，它试图在position:absolute+overflow:auto父元素上显示滚动条，当子元素有更多的内容但设置了最大高度时。要演示该场景，请查看此演示：我
浏览 1提问于2012-09-21得票数 2
2回答
我试图在我的站点的父容器(不是全身)中垂直拉伸一个图像，它是id为"imagen-fondo“的div我怎样才能让它和他的直系孩子一样高，或者至少更高呢？，这就是为什么当屏幕很大时，问题不会发生，但<
浏览 3提问于2012-11-15得票数 0
回答已采纳
1回答
我无法在wp7中滚动页面。即使我添加了scrollview，它仍然不能工作。"" VerticalAlignment="Top" Width="335"/>
</ScrollViewer>
屏幕会自动返回到以前的位置，并且滚动未完成
浏览 0提问于2011-09-23得票数 11
回答已采纳
2回答
我想设置文本区域的最大高度，这样当用户不断添加文本时，如果它达到最大高度，它将添加一个滚动。但我目前的实现是剥离模式，所以如果我添加更多的文本，模式就会变得太长。 height: auto; " <textareama
浏览 16提问于2020-05-12得票数 0
回答已采纳
我有一个非常基本的造型问题[![return ( <ScrollView style={{ flex: 1, backgroundColor: "blue" }}>
浏览 4提问于2020-12-28得票数 1
回答已采纳
我有一个网站，其中一个页面不应该滚动(整个页面应该适合客户的屏幕)。在这个站点上，我需要在一个列中有一个可选对象的列表，它可能非常大(它最终肯定会溢出屏幕)
我将这些项存储在一个<v-list>组件中，并命令它在溢出时滚动。然而，问题是，当<v-list-item>元素的数量太多时，它会迫使其父列增加大小，从而破坏不可滚动的页面布局。这似乎是因为所有实际的<v-list-item>组件仍在渲染，这会拉伸</e
浏览 22提问于2021-05-18得票数 0
回答已采纳
z-index: 9999; height: 100%;}
它的大小可以正确地延伸到窗口的高度，但当用户滚动时，覆盖图不会跟随。html和body元素设置为width: 100%；和height: 100%。覆盖图是文档的第一个子项。
浏览 1提问于2012-11-24得票数 1
回答已采纳
我对表中的列进行了自动完成搜索，在选定名称后，应该将用户滚动到所选项的行。下面是搜索时触发的方法。selectedData[0]); tr.scrollIntoView();}
问题:正在发生的是页面滚动到
浏览 3提问于2021-03-02得票数 0
2回答
当.item的top属性设置为170 it时，滚动会因为overflow: auto而变得混乱。然而，如果我使用margin-top而不是top，滚动就会像我预期的那样工作。
浏览 4提问于2017-08-18得票数 1
回答已采纳
值得一提的是，这些表具有table-layout: auto;和width: auto;。当一个表有那么多行时出现了一个问题，它离开了屏幕的底部边缘。这给用户一个良好的垂直滚动条，每当表超过最大高度.这是可行的，但出于某种原因，浏览器( IE和Chrome)没有考虑滚动条的宽度，因此，每当表的高度超过最大值并触发溢出时，表就会向左滚动，并且第一列中的一些单元格会对
浏览 3提问于2011-06-21得票数 0
回答已采纳
我基于ViewModel属性控制绑定上的拉伸属性。当我根据绑定到ViewModel的“Combobox”更改拉伸属性时，当使用“UniformToFill”时，图像“切断”了宽图像的角，就会出现这个问题。因此，可以使用ScrollViewer来滚动图像内容。
问题是，ScrollViewer似乎没有出现滚动条，使我能够滚动。ImageStretch}" Name="PhotoImage" />
浏览 5提问于2015-07-14得票数 3
回答已采纳
1回答
nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>因为你们可以看到标题1列，它有一个固定的高度我基本上想要实现的是，当，更多的文本被添加，包含的div将在高度增长。当包含div的底部到达浏览器窗口的底部时，将出现垂直滚动条。
浏览 3提问于2022-03-15得票数 0
我刚开始在安卓和WindowsPhone上用Maqetta创建一个移动应用程序。该应用程序包括一些带有文本输入的网页，所以我需要软键盘来工作。android:windowSoftInputMode="adjustResize“和</em
浏览 4提问于2013-07-23得票数 2
1回答
我的问题是，我需要网格基于它的内容增长，直到它填充可用的空间，然后它应该获得滚动条。 New button当网格填充时，它应该展开，直到New按钮到达页面底部，然后网格应该显示滚动条。
浏览 16提问于2022-02-18得票数 0
回答已采纳
黑色区域表示页面布局，当宽度无法拉伸以保持纵横比时，div需要高度为100%，或者当高度无法拉伸时，宽度为100%。我不确定应该使用什么属性来计算我已经尝试过了:设置height: 100%; width: auto;或width: 100%; height
浏览 2提问于2020-02-25得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
