是否可以将容器的高度调整为具有绝对位置的子元素的高度？

Question

我有一个带有搜索字段的网页，如下所示：

当用户开始在搜索字段中输入时，将显示自动完成列表。为防止它破坏页面布局，它将position属性设置为absolute。问题是，当页面上的内容很少并且屏幕尺寸相当小时，自动完成列表将向下扩散到html元素的底部边框下方（因此在页脚下方），如下所示：

我理解position: absolute的整个目的是使元素独立于其他元素的流动，但有没有办法将容器元素的高度调整为其子元素的高度position: absolute使用CSS？如果没有，你会推荐其他什么技术？

Answer 1

假设：

页脚高度：60px;

footer div id =＆＃34;页脚＆＃34;;

页脚后面的背景作为窗口（而不是全部在特定的区域内）;

如果你有JQuery：

//Replace 120 below with the height of your footer + padding + how far the search bar is from the top of your screen
var height = ($(window).height() - 120); 
$('#footer').css({"height", height});

将上述调整替换为......

使其看起来更好一些

$('#footer').stop().animate({height: height});

Answer 2

我猜你的意思是在页脚后面。

如果是这样，您可以使用css z-index属性将自动填充列表放在页脚元素前面。

Answer 3

为此使用 溢出-Y：滚动 最大高度：200像素 位置：绝对 的z-index：2

Answer 4

html {
    overflow: auto;
}

body {
    overflow: hidden;
}

.autocomplete-list {
     margin-bottom: [height of footer]
}

如果列表超出了身体的高度，那么你的css就会出现问题。

上面的CSS不会让任何事情发生在身体之外，如果确实如此，那么你会得到并滚动条。

自动填充列表的margin-bottom使其高于页脚