html - 如何使元素随其父元素一起增长(未指定父元素高度)

Question

这个问题已被问过几次，但据我所知，所有问题都至少有 4-5 年的历史了。所以我想知道是否有更好/更简单的新方法来做到这一点。

我有一个带有按钮的菜单，菜单的大小会根据其中张贴的 Logo 而改变。因此，当我上传一个大 Logo 时，菜单的高度会被拉伸(stretch)，但按钮的高度会保持不变。菜单栏没有指定高度，因此 height:100% 将不起作用。

图像更清晰:

白色条是我的菜单，灰色区域是我的按钮。

html 标记:

<nav class="navbar navbar-default navbar-static-top m-b-0">
    <div class="navbar-header">
        <a class="navbar-toggle hidden-sm hidden-md hidden-lg " href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse"><i class="ti-menu"></i></a>
        <div class="top-left-part"><a class="logo" href="index.php"><img style="height:100%;" src="logo.png" alt="home" /></a></div>
        <ul class="nav navbar-top-links navbar-left hidden-xs">
            <li><a href="javascript:void(0)" class="open-close hidden-xs waves-effect waves-light"><i class="icon-arrow-left-circle ti-menu"></i></a></li>
        </ul>
        <ul class="nav navbar-top-links navbar-right pull-right">
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="hidden-xs"><i class="fa fa-user"></i> User</b> </a>
                <ul class="dropdown-menu dropdown-user animated flipInY">
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

相关CSS:

.navbar-default {
    position: relative;
    width: 100%;
    top: 0;
}
.navbar-header {
    background: #fff !important;
    width: 100%;
    border: 0;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-top-links > li > a {
    color: #1f7db1;
    padding: 0 12px;
    line-height: 60px;
    min-height: 60px;
}
.navbar-top-links > li > a:hover {
    background: rgba(0, 0, 0, 0.1);
}

Answer 1

使用 CSS 这可能会降低父级的 display:table 和子级的 display:table-cell 。但我不建议您在当前情况下使用它，因为那里有一堆 div、导航栏等。

所以我做了一个JQ解决方案。我希望你不介意。如果需要，它非常容易理解和修改。

如果有帮助请告诉我

在这里查看 fiddle > Jsfiddle

JQ代码:

var newHeight = $(".top-left-part").height()
$(".pull-right > li.dropdown > a.dropdown-toggle").height(newHeight)

为了垂直对齐我添加的文本

a.dropdown-toggle {
    display:flex
    align-items:center;
}