Question

我试图为我的家庭服务器网络平台制作一个简单的菜单，以实现多种屏幕分辨率。

#menu-area{
    position: absolute;
    text-align:center;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;
    min-height: 50px;
}

.menu-box{
    display:inline-block;
    height: 50px;
    width: 150px;

    font-size: 25px;
    line-height: 50px;
    text-align:center;
}

我的想法是，随着屏幕变窄，菜单链接会重新排列，并从一行转换为一列。那部分按预期工作。

然而，当菜单垂直长度超过2行时，它会开始超出内容显示区域。

我无法弄清楚，如何拉伸包含菜单框-es的div以包含它们，因此内容区域可以被推下而不会超出菜单。

P.S。：如果可能，我只想使用html和css进行此布局。

Answer 1

如果你在CSS中注释掉这些行 - 它可以工作：

#head {
/* min-height: 200px; */
/* height: 15%; */

#menu {
/* height: 50px; */

#menu-area {
/* position: absolute; */
/* min-height: 50px; */

如何垂直拉伸内联块的容器？

1 个答案: