Javascript 将拉伸上的项目与父div的中心对齐

我试着在手机屏幕上创建一个可以伸展到最大高度的菜单。对于父容器，我使用带有flex方向列的flexbox，并在全屏高度上拉伸项目

$（文档）.ready（（）=>{
$（“#btnMenu”）。单击（（）=>{
切换菜单（）；
});
$（“.navbarLink”）。单击（（）=>{
if（$（“#navbarItems”）.hasClass（“activeNavbar”））{
切换菜单（）；
}
});
});
函数切换菜单（）{
$（“#navbarItems”）.toggleClass（“activeNavbar”）；
toggleMenuBtn（）；
}
函数toggleMenuBtn（）{
$（“#btnMenu”）.toggleClass（“activeMenuBtn”）；
}

正文{
保证金：0；
}
.链接{
文字装饰：无；
}
#导航栏{
高度：60px；
排名：0；
左侧填充：200px；
右边填充：200px；
位置：粘性；
背景：#1e222a；
}
#导航设备{
身高：100%；
显示器：flex；
对齐项目：居中；
}
#标识链接{
显示器：flex；
对齐项目：居中；
}
#navbarItems.navbarItem:不是（：第一个孩子）{
左边距：30px；
}
.纳瓦巴利姆{
背景：#1e222a；
}
.navbarLink{
颜色：#ffffff；
}
.navbarLink:悬停{
颜色：#3abcf3；
}
#btnMenuContainer{
身高：100%；
显示：无；
}
#btnMenu{
光标：指针；
}
menuBtnBar先生{
宽度：35px；
高度：5px；
利润率：6px0；
背景色：#ffffff；
过渡：0.4s；
}
.activeMenuBtn#barTop{
变换：旋转（-45度）平移（-9px，6px）；
}
.activeMenuBtn#酒吧中心{
不透明度：0；
}
.activeMenuBtn#barBottom{
变换：旋转（45度）平移（-8px，-8px）；
}
@介质（最大宽度：1200px）{
#导航栏{
左侧填充：150px；
右侧填充：150px；
}
}
@介质（最大宽度：1100px）{
#导航栏{
左侧填充：0；
右边填充：0；
}
#btnMenuContainer{
显示器：flex；
对齐项目：居中；
}
#btnMenu{
左边距：20px；
}
#导航设备{
左边距：0；
显示：无；
}
#navbarItems.activeNavbar{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
高度：100vh；
}
#标识链接{
显示：内联块；
}
.纳瓦巴利姆{
弹性：1100%；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
#navbarItems.navbarItem:不是（：第一个孩子）{
左边距：0；
}
#navbarItems.navbarItem:不是（：最后一个孩子）{
边框底部：1px实心#6767；
}
.navbarLink{
宽度：100%；
身高：100%；
显示：内联块；
}
}

---

它工作正常。检查代码片段和小提琴进一步澄清

Noe所有链接均居中对齐，菜单高度占据可用空间的全部高度，不再滚动

我的建议是使用100vh作为高度，因为它比应用静态值要好，因为100vh是动态值

$（文档）.ready（（）=>{
$（“#btnMenu”）。单击（（）=>{
切换菜单（）；
});
$（“.navbarLink”）。单击（（）=>{
if（$（“#navbarItems”）.hasClass（“activeNavbar”））{
切换菜单（）；
}
});
});
函数切换菜单（）{
$（“#navbarItems”）.toggleClass（“activeNavbar”）；
toggleMenuBtn（）；
}
函数toggleMenuBtn（）{
$（“#btnMenu”）.toggleClass（“activeMenuBtn”）；
}

正文{
保证金：0；
}
.链接{
文字装饰：无；
}
#导航栏{
高度：60px；
排名：0；
左侧填充：200px；
右边填充：200px；
位置：粘性；
背景：#1e222a；
}
#导航设备{
身高：100%；
显示器：flex；
对齐项目：居中；
}
#标识链接{
显示器：flex；
对齐项目：居中；
}
#navbarItems.navbarItem:不是（：第一个孩子）{
左边距：30px；
}
.纳瓦巴利姆{
背景：#1e222a；
}
.navbarLink{
颜色：#ffffff；
}
.navbarLink:悬停{
颜色：#3abcf3；
}
#btnMenuContainer{
身高：100%；
显示：无；
}
#btnMenu{
光标：指针；
}
menuBtnBar先生{
宽度：35px；
高度：5px；
利润率：6px0；
背景色：#ffffff；
过渡：0.4s；
}
.activeMenuBtn#barTop{
变换：旋转（-45度）平移（-9px，6px）；
}
.activeMenuBtn#酒吧中心{
不透明度：0；
}
.activeMenuBtn#barBottom{
变换：旋转（45度）平移（-8px，-8px）；
}
@介质（最大宽度：1200px）{
#导航栏{
左侧填充：150px；
右侧填充：150px；
}
}
@介质（最大宽度：1100px）{
#导航栏{
左侧填充：0；
右边填充：0；
}
#btnMenuContainer{
显示器：flex；
对齐项目：居中；
}
#btnMenu{
左边距：20px；
}
#导航设备{
左边距：0；
显示：无；
}
#navbarItems.activeNavbar{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
高度：计算（100vh-60px）；
}
#标识链接{
显示器：flex；
证明内容：中心；
}
.纳瓦巴利姆{
弹性：1100%；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
#navbarItems.navbarItem:不是（：第一个孩子）{
左边距：0；
}
#navbarItems.navbarItem:不是（：最后一个孩子）{
边框底部：1px实心#6767；
}
.navbarLink{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
}

---

让

.navbarLink

也有一个灵活的布局

.navbarItem {
    flex: 1 1 100%;
}

.navbarLink {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

---

顺便说一下，这里有一个很棒的资源，在我学习使用flexbox布局时，它确实帮助了我

点击此链接，有一款非常不错的游戏，可以教你flexbox。之后，您将能够修复导航。

100vh是动态的：它表示视口高度的100%。您可能希望使用最小高度而不是高度tho。@问题3R，如果您需要有关此解决方案的任何帮助，请告诉我。谢谢。@Question3r，这是我的荣幸：）对不起，现在CSS坏了。div容器中的链接现在没有100%的高度和宽度拉伸是的，我看到了，只有文本是可点击的，而不是完整的