如何防止文本调整大小影响div高度？
我正在开发一个网站，其中禁用访问是主要要求之一。为此，我实现了一个 Javascript 字体大小增大/减小功能，效果非常好。
但是，调整大小的文本所在的 div 元素会根据文本大小更改高度，而其他所有内容保持不变。宽度不变，但高度属性设置为 100% 没有区别。为了保持高度固定，需要对 CSS 进行哪些更改？那么页脚内容以及内容元素背景保持不变？
这是所有其他 div 都嵌套在其中的容器元素：
#container{
width:1000px;
height:100%;
background-color:#FEFFF1;
margin: 0 auto;
margin-top:5px;
text-align: left;
font-size:1.4em;
border: 1px dotted black;
overflow:scroll;
}
这是内容元素，页面唯一内容所在的位置：
#content{
float:left;
margin-top: 223px;
margin-left:250px;
height:100%;
width: 70%;
overflow:auto;
padding-bottom:120px;
position:relative;
}
编辑 将容器溢出值更改为滚动，它本来应该在的位置。
I'm working on a website where disabled access is one of the primary requirements. To do this, I've implemented a Javascript font size increase/decrease function that works great.
However, the div element where the resized text resides changes height based on the text size while everything else stays the same. Width doesn't change, but the height property set to 100% makes no difference. What changes to the CSS are necessary to keep the height fixed? so the footer content as well as the content element background stay the same?
This is the container element where all other divs are nested inside:
#container{
width:1000px;
height:100%;
background-color:#FEFFF1;
margin: 0 auto;
margin-top:5px;
text-align: left;
font-size:1.4em;
border: 1px dotted black;
overflow:scroll;
}
This is the content element, where the page-unique content goes:
#content{
float:left;
margin-top: 223px;
margin-left:250px;
height:100%;
width: 70%;
overflow:auto;
padding-bottom:120px;
position:relative;
}
EDIT changed container overflow value to scroll, where it should have been originally.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果不允许容纳文本的容器随文本扩展，那么让人们调整文本大小还有什么意义呢？
请注意，对于“残疾人”来说，文本大小不是问题。这对每个人来说都是一个问题。从好的方面来看，我们终于到了浏览器将其添加为比过去更可用和更容易找到的功能的阶段。因此，编写自己的基于 JS 的文本大小调整小部件并不像以前那么大了。
要回答您的具体问题，CSS 中的高度是指页面（在外层）或嵌套在其中的任何容器的高度。如果内容溢出，它会根据需要超过所述高度，除非您提供 SCROLL 或 HIDDEN 的溢出值，这又违背了字体调整大小的目的。最好的选择是确保您的页面设计/布局可以处理可变的字体大小。
If you don't allow the containers that hold the text to expand with the text, then what's the point of letting people resize the text?
Note that text-size is not an issue for 'disabled' people. It's an issue for everyone. On the plus side, we're finally at the point where browsers are adding this as a much more usable and findable feature than in the past. As such, writing your own JS based text-resizing widgets isn't as big of a deal as it once was.
To answer your specific question, height, in CSS, refers to the height of the page (at the outer level) or whatever container it is nested within. It will exceed said height if need be if the contents overflows, unless you provide an overflow value of SCROLL or HIDDEN, which, again, defeats the purpose of the font resizing. Your best bet is to make sure your page design/layout can handle variable font sizes.
只需指定固定高度而不是百分比。如在
Just specify a fixed height instead of a percentage. As in