How to make element grow in height with its parent (no parent height specified)

Question

This question has been asked a couple of times, but all are at least 4-5 years old from what I see. So I am wondering if there is a new better/easier way to do this.

I got a menu with a button in it, the menu will change in size according to the logo that is posted in it. So when I upload a large logo the menu is stretched in height, but the button stays the same height. The menubar has no specified height so height:100% will not work.

Image for more clarity:

The white bar is my menu, and the grey area my button.

The html markup:

<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>

Relevant 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

using CSS this could be down with display:table on parent and display:table-cell on the children. but i don't suggest you use that in your current situation because you have a bunch of divs there, navbars etc.

so i made a JQ solution. i hope you don't mind. it's very easy to understand and easy to modify if needed.

let me know if it helps

see fiddle here > Jsfiddle

JQ code :

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

to align the text vertically i added

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

Answer 2

Here is a proof-of-concept solution that may help. This solution uses CSS only and does not require JavaScript.

Let .wrap be the parent container that contains your navigation, logo and so on.

In .wrap, create a protected area to the right that will contain your button. Do this by specifying padding-right: 100px (for example) and then specify position: relative.

You can now define an element called .right-panel that will contain your button and so on. For .right-panel, specify position: absolute and set the offsets as top: 0 and bottom: 0 to force it to keep to the height of the parent block, and then right: 0 to pin it to the right of the parent and then set the width: 100px (for example).

As you change the content in the parent container, the .right-panel will take on the height of the parent in a responsive manner.

The limitation here is that you need to specify a width for the right-hand side panel/element, which may not be too limiting since you know something about the design of the button (such as its dimensions).

You might need to specify a min-height for the parent .wrap for cases where you have either no logo or a logo whose height is less than that of the intrinsic height of the button.

Note: If you are using a CSS framework like Bootstrap, you may need to do some more work fit this into a floated parent, but I have not tried it.

.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>