Question

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

 <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，因此您可以查看它。

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

Answer 1

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

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

Answer 2

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

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

Answer 3

在你的CSS中：

而不是指定height:0px和overflow: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

显示/隐藏标题

3 个答案: