Html 固定高度父级应包括绝对/固定位置子级

我指的是

div.settings

作为“父项”，而

#main menu

作为“子项”

现在，我想创建一个类似于Windows中的下拉列表。因此，父对象的高度需要固定（与最初一样）。另外，我希望我的孩子被固定在能够创造以下效果的位置（我稍后会自己创造效果）

这就是我到目前为止所做的

*{
框大小：边框框；
游标：默认值；
用户选择：无；
字体系列：Roboto；
字体大小：400；
}
.设置{
填充：7px 16px；
边框：0.5px实心#7777；
边界半径：4px；
}
#主菜单{
位置：固定；
/*还是绝对的*/
显示：内联flex；
柔性流：柱包裹；
调整内容：灵活启动；
对齐项目：拉伸；
}
span.opt{
填充：5px20px；
柔性生长：1；
保证金：0；
背景：#777；
颜色：#FFF；
文本对齐：居中；
显示：无；
}
span.selected{
显示：内联块！重要；
背景：#28F；
}
#主菜单：悬停>span.opt{
显示：内联块；
}

选择默认浏览器

谷歌浏览器
Mozilla Firefox
游猎
微软边缘
歌剧院
Internet Explorer

我添加了悬停效果，以便您可以看到。设置高度是动态的

var mainMenu=document.getElementById（“mainMenu”）；
var heightc=document.getElementById（“heightc”）；
var opt=document.getElementsByClassName（“opt”）；
高度=0；
mainMenu.addEventListener（'mouseenter'，function（）{
对于（变量i=0；i 0）{
var dm=i*opt[i]。越位；
main menu.style.bottom=dm+'px'；
heightc.style.paddingBottom=dm+'px'；
scrollHeight=window.scrollY；
scrollTo（0，window.scrollY+dm）；
}
}
});
mainMenu.addEventListener（'mouseleave'，function（）{
main menu.style.bottom=0；
heightc.style.paddingBottom=0；
滚动到（0，滚动高度）；
});
*{
框大小：边框框；
游标：默认值；
用户选择：无；
字体系列：Roboto；
字体大小：400；
}
#财政司司长{
高度：1000px；
}
.设置{
填充：7px 16px；
边框：0.5px实心#7777；
边界半径：4px；
}
#主菜单{
显示：内联flex；
柔性流：柱包裹；
调整内容：灵活启动；
对齐项目：拉伸；
位置：相对位置；
}
/*增加*/
#主菜单范围{
显示：无；
}
#主菜单。已选择{
显示：块；
}
#主菜单：hover.opt{
显示：块；
}
/*结束添加*/
span.opt{
填充物：5px12px；
柔性生长：1；
保证金：0；
背景：#777；
颜色：#FFF；
文本对齐：居中；
}
span.selected{
显示：内联块！重要；
背景：#28F；
}

选择默认浏览器
谷歌浏览器
Mozilla Firefox
游猎
微软边缘
歌剧院
Internet Explorer
您可以将菜单包装在一个具有最小高度的div中，以在父div中保留该空间，或使用“占位符”span.opt。选择可见性：隐藏（请参见更新的代码段）


*{
框大小：边框框；
游标：默认值；
用户选择：无；
字体系列：Roboto；
字体大小：400；
}
.设置{
填充：7px 16px；
边框：0.5px实心#7777；
边界半径：4px；
背景色：继承；
}
#主菜单{
位置：固定；
/*还是绝对的*/
显示：内联flex；
柔性流：柱包裹；
调整内容：灵活启动；
对齐项目：拉伸；
}
span.opt{
填充物：5px12px；
柔性生长：1；
保证金：0；
背景：#777；
颜色：#FFF；
文本对齐：居中；
显示：无；
}
span.占位符{
可见性：隐藏；
}
span.selected{
显示：内联块！重要；
背景：#28F；
}
#主菜单：悬停>span.opt{
显示：内联块；
}

选择默认浏览器

谷歌浏览器
Mozilla Firefox
游猎
微软边缘
歌剧院
Internet Explorer
占位符

我希望父级在其内容中包含菜单

将position
absolute
或
fixed
添加到菜单会将其从内容流中移除，因此如果不稍微重新构造HTML，您将无法获得所需的布局

下面添加了演示，如果您有任何问题，请告诉我。您需要添加额外的逻辑来检查菜单是否超出视口边界


const MENU=document.getElementById（'main MENU'）；
const SELECTION=document.getElementById（'SELECTION'）；
const OPTION_CONTAINER=document.getElementById（'options'）；
const OPTIONS=[…document.querySelectorAll（'.opt'）]；
让高度；
函数addEventListeners（）{
OPTIONS.forEach（（选项，索引）=>{
option.addEventListener（'click'，（e）=>{
让val=option.innerText；
SELECTION.innerText=val；
位置菜单（索引）；
if（MENU.classList.contains（'is-open'））{
MENU.classList.remove（'is-open'）
}
})
})
MENU.addEventListener（'mouseenter'，（）=>{
MENU.classList.add（'is-open'）；
})
MENU.addEventListener（'mouseleave'，（）=>{
MENU.classList.remove（'is-open'）；
})
}
函数getOptionHeight（）{
高度=选项[0]。getBoundingClientRect（）。高度；
}
功能位置菜单（索引）{
索引--；
选项_CONTAINER.style.transform=`translateY（-${index*height}px）`；
}
getOptionHeight（）；
addEventListeners（）
*{
框大小：边框框；
游标：默认值；
用户选择：无；
字体系列：Roboto；
字体大小：400；
}
.设置{
/*演示*/
利润率：100px 0 100px；
填充：7px 16px；
边框：0.5px实心#7777；
边界半径：4px；
}
.选项容器{
位置：相对位置；
宽度：200px；
}
.选项{
显示：内联flex；
柔性流：柱包裹；
调整内容：灵活启动；
对齐项目：拉伸；
位置：绝对位置；
排名：0；
左：0；
右：0；
不透明度：0；
指针事件：无；
}
.选择{
填充：5px20px；
柔性生长：1；
保证金：0；
巴克