如何使元素與其父級一起長高（沒有指定父級高度）

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的孩子。但我不建議你在目前的情況下使用它，因爲你有一堆divs，navbars等。

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

讓我知道，如果它可以幫助

在這裏看到小提琴>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將以響應方式呈現父級高度。

這裏的侷限性是您需要爲右側面板/元素指定一個寬度，因爲您知道按鈕的設計（如其尺寸），所以可能不會太受限制。

對於父母.wrap，如果您沒有徽標或徽標的高度小於按鈕的固有高度，您可能需要指定min-height。

Note：如果您使用的是像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>