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.

Answer 2

You can programmatically update the .register-div height. See the updated fiddle http://jsfiddle.net/7wuzzm09/7/.

Note, I haven't accounted the padding, you can do it yourself.

Answer 3

In your CSS:

Instead of specifying height:0px and overflow:hidden specify display: none; for login and register div.

In their respective .active classes make it display: block;

.login-div,
.register-div {
    z-index:1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    background:#dbdfe2;
    color:#515151;
    padding: 0;
    display: none;
}

.login-div.active {
    padding:37px;
    display: block;
}

.register-div.active {
    padding:15px;
    display: block;
}

DEMO