显示/隐藏标题[重复]答案

【问题标题】：Show/Hide Header [duplicate]显示/隐藏标题[重复]
【发布时间】：2015-06-03 00:56:47
【问题描述】：

我有一个具有以下结构的标题：

 <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-div 和 register-div 被隐藏。当用户单击某个按钮时，这些 div 的显示（嗯，取决于单击哪个按钮）。我遇到的问题是我无法让 div 显示所有内容。

我已经创建了一个小提琴here，所以你可以看看。

现在就在每个人都告诉我设置高度之前，我不能，因为我不知道高度会是多少。根据用户选择的内容，内容的高度会发生变化。

【问题讨论】：

其实你想要什么？你想在登录点击时显示register-div？
先生您的问题是什么？
您是否需要类似的东西：jsfiddle.net/7wuzzm09/2？
jsfiddle.net/arunpjohny/39axfct7/4

标签： jquery html css

【解决方案1】：

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

注意，我没有算padding，你自己算吧。

【讨论】：

【解决方案2】：

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

我将以下内容添加到您的注册课程height:100%; 让我知道它是否符合您的喜好和投票，如果我有帮助，请选择作为答案。

【讨论】：

这比我的回答要好。赞一个。

【解决方案3】：

在你的 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

【讨论】：