Question

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

我有一个带有按钮的菜单，菜单会根据贴在其中的徽标而改变大小。因此，当我上传大型徽标时，菜单的高度会拉伸，但按钮的高度保持不变。菜单栏没有指定的高度，因此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，navbars等。

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

让我知道是否有帮助

在这里看小提琴＆gt; 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;
}

Answer 2

这是一个可能有所帮助的概念验证解决方案。此解决方案仅使用CSS，不需要JavaScript。

让.wrap成为包含导航，徽标等的父容器。

在.wrap中，在右侧创建一个包含按钮的受保护区域。通过指定padding-right: 100px（例如）然后指定position: relative来执行此操作。

您现在可以定义一个名为.right-panel的元素，它将包含您的按钮，依此类推。对于.right-panel，请指定position: absolute并将偏移量设置为top: 0和bottom: 0以强制它保持父块的高度，然后right: 0为将其固定在父级的右侧，然后设置width: 100px（例如）。

当您更改父容器中的内容时，.right-panel将以响应方式显示父级的高度。

这里的限制是你需要指定右侧面板/元素的宽度，这可能不是太有限，因为你对按钮的设计有了一些了解（例如它的尺寸）。

如果您没有徽标或徽标的高度小于按钮固有高度的徽标，则可能需要为父min-height指定.wrap。

注意：如果您使用的是像Bootstrap这样的CSS框架，您可能需要做一些更适合浮动父级的工作，但我还没有尝试过。

.wrap {
  border: 1px dotted blue;
  position: relative;
  padding-right: 100px;
}
.right-panel {
  border: 1px dashed gray;
  position: absolute;
  right:0;
  top: 0;
  bottom: 0; 
  width: 100px;
}

<div class="wrap">
  <h1>Some header that can be text or a logo.</h1>
  <p>Some content and so on.</p>
  <div class="right-panel">
    <p>A button or whatever.</p>
  </div>
</div>

如何使元素与其父元素一起增长（未指定父元素高度）

2 个答案: