显示/隐藏标题

时间:2015-03-30 05:25:15

标签: jquery html css

我有一个包含以下结构的标题:

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

加载页面时,会隐藏login-divregister-div。当用户点击某个按钮时,这些div显示(好吧,具体取决于点击的按钮)。我遇到的问题是我无法让div显示所有内容。

我创建了一个小提琴here,因此您可以查看它。

现在就在每个人都告诉我设定一个高度之前,我不能,因为我不知道它的高度。根据用户选择的内容,内容的高度将发生变化。

3 个答案:

答案 0 :(得分:3)

https://jsfiddle.net/schwiegler/7wuzzm09/1/这是你小提琴的更新版本。

我将以下内容添加到您的注册课程height:100%;,如果我愿意,请告诉我是否符合您的喜好并进行投票,如果我帮助的话,请选择作为答案。

答案 1 :(得分:0)

您可以通过编程方式更新.register-div高度。请参阅更新的小提琴http://jsfiddle.net/7wuzzm09/7/

注意,我没有考虑填充,你可以自己做。

答案 2 :(得分:0)

在你的CSS中:

而不是指定height:0pxoverflow:hidden为登录和注册div指定display: none;

在各自的.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