Question

我正在为我的最新项目使用bootstrap的最新版本。我陷入了标题部分。我希望根据徽标高度自动调整菜单高度，这样任何尺寸的徽标都不会影响菜单高度。

即使我不知道是否可以使用bootstrap。我知道如何用javascirpt调整高度，但不想用javascript。我很好奇是否有办法调整身高？

    <div id="main-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 logo">
                    <hgroup>
                        <img src="http://placehold.it/141x55" />
                    </hgroup>
                </div>
                <div class="col-lg-8 main-menu">
                    <div class="menu clearfix">
                        <ul class="nav nav-pills pull-right">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Work</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS：

#main-header{
    background-color: #efefef;
    height: auto;
}
#main-header .logo{
    margin: 10px 0;
}
#main-header .main-menu{
    height: auto;
}
#main-header .menu li a{
    padding: 0 20px;
    line-height: 100%;
}

这是我正在尝试的小提琴：JSFIDDLE

Answer 1

您可以使用height:100% css属性执行此操作。 height：100％将始终掩盖父元素的高度。因此，如果您希望菜单div覆盖高度，则将高度：100％提供给菜单

<div class="menu clearfix" style="height:100%">
    <ul class="nav nav-pills pull-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Work</a></li>
    </ul>
</div>

通过这样做，现在菜单将占据父div的全部高度，即<div class="col-lg-8 main-menu"> 同样，如果需要，您可以按照其他元素的方法。

如何根据容器高度自动调整菜单高度

1 个答案: