我有一个包含以下结构的标题:
<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,因此您可以查看它。
现在就在每个人都告诉我设定一个高度之前,我不能,因为我不知道它的高度。根据用户选择的内容,内容的高度将发生变化。
答案 0 :(得分:3)
https://jsfiddle.net/schwiegler/7wuzzm09/1/这是你小提琴的更新版本。
我将以下内容添加到您的注册课程height:100%;
,如果我愿意,请告诉我是否符合您的喜好并进行投票,如果我帮助的话,请选择作为答案。
答案 1 :(得分:0)
您可以通过编程方式更新.register-div
高度。请参阅更新的小提琴http://jsfiddle.net/7wuzzm09/7/。
注意,我没有考虑填充,你可以自己做。
答案 2 :(得分:0)
在你的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 强>