css - 如何防止文本调整大小影响 div 高度？

Question

我在一个网站上工作，其中禁用访问是主要要求之一。为此，我实现了一个 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;
}

编辑 将容器溢出值更改为滚动，它原本应该在的位置。

Answer 1

如果您不允许容纳文本的容器随文本扩展，那么让人们调整文本大小有什么意义呢？

请注意，文本大小对于“残疾人”来说不是问题。这是每个人的问题。从好的方面来说，我们终于到了浏览器将其添加为比过去更有用和更容易找到的功能的地步。因此，编写您自己的基于 JS 的文本大小调整小部件并不像以前那么重要。

要回答您的具体问题，高度在 CSS 中指的是页面(在外层)或它嵌套在其中的任何容器的高度。如果内容溢出，它将超过所述高度，除非您提供 SCROLL 或 HIDDEN 的溢出值，这同样会破坏字体调整大小的目的。最好的办法是确保您的页面设计/布局可以处理可变字体大小。