如何停止正文内容显示在页脚内容及下方

Posted 2023-03-05

【中文标题】如何停止正文内容显示在页脚内容及下方

【英文标题】：how to stop body content showing over footer content and below

【发布时间】：2014-08-11 22:30:40

【问题描述】：

我正在使用自动完成文本框，这里基于动态值超出滚动条，如果超过文本框滚动条中显示的值自动超过页脚页面并显示两个滚动条。如果文本框滚动条中显示的更多值不应超过页脚内容，则仅显示在正文容器中，也不显示两个滚动条，所以请帮我解决这个问题。

css代码：

.ui-autocomplete 
    max-height: 28%;
    overflow-y: auto;

自动完成代码： area数据类型是数组，它包含多个值

autocomplete(
    autoFocus : true,
    source : areas,
    selectFirst : true,
    select : function(event, ui) 
;

图片

【问题讨论】：

而不是给 max-height in % 尝试一些固定值，比如 max-height:200px

max-height: 200px 试试这个，但是这不起作用谢谢你的命令

这是一个小提琴，其中最大高度似乎可以正常工作 -jsfiddle.net/uH5zb - 它与您的代码有何不同？

如果你能创建一个有效的DEMO会更好..

你会得到双侧边栏，因为正文和页脚包装器的溢出设置为自动或滚动

【参考方案1】：

一个示例代码会很有帮助，但从所附图片中，我猜您的 body 容器 的父级具有固定高度，而您的 body 容器 具有静态定位。

如果是这样，您需要将 body 容器 的 CSS 位置更改为 relative 并为您的 .ui-autocomplete 类分配固定高度：

.body-container 
    position: relative;


.ui-autocomplete 
    max-height: 100px; /* For example */

如果您从 body 容器 的父级移除固定高度，第二个滚动条应该会消失。如果您必须保持固定高度，则将 overflow-y 设置为 hidden。