Geek Answers Handbook

Show / Hide Title

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, it is hidden login-divand register-div. When a user clicks on a specific button, this is a div show (well, depending on which button is clicked). The problem I am facing is that I cannot get the div to display all content.

I created a violin here , so you can check it out.

Now that everyone is telling me to set the height, I can’t because I don’t know what the height will be. Depending on which user selects, the height of the content will change.

+4
source share
3 answers

https://jsfiddle.net/schwiegler/7wuzzm09/1/ .

height:100%;, , , .

+3

.register-div. . http://jsfiddle.net/7wuzzm09/7/.

, , .

0

CSS:

height:0px overflow:hidden display: none; div.

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

0

More articles:


All Articles