Show/Hide Header [duplicate]

Question

I have a header with the following structure:

 <header>
    <div class="container-fluid login-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid register-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid nav-header middle">
        <div class="col-lg-3"></div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-2 logo"><img src="images/logo.jpg" alt=" LOGO" id="img_logo"> </div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-3"></div>
    </div>
</header>

When the page loads, login-div and register-div are hidden. When a user clicks on a certain button, these div's show (well, depending on which button is clicked). The issue I'm having is that I can't get the div to show all content.

I've created a fiddle here, so you can check it out.

Now just before everyone tells me to set a height, I can't because I don't know what the height will be. Depending on what the user selects, the height of the content will change.

Answer 1

https://jsfiddle.net/schwiegler/7wuzzm09/1/ this is an updated version of your fiddle.

I added the following to your registration class height:100%; let me know if it is working to your liking and up-vote and select as answer if I helped.