我对于无法在标题中更具描述性而道歉（欢迎提出编辑建议......）
我设计了一个由图像网格组成的团队页面。我已经准备好在Bootstrap 3中做出响应。
当消费者点击图片旁边的“更多”标签时，图片下方会显示隐藏的DIV，其中包含有关该团队成员的更多信息。
我遇到的问题是出现的DIV显示了DIV的所有内容，但背景颜色（以及另一个用作关闭按钮的DIV）停在行正下方的行底部被点击了。
<div id="overlay"></div>
<div class="container">
<div id="staff-page" class="row">
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 zindex10">
<img src="https://www.mrs.org.uk/img/blank_profile[bw].jpg" width=190 />
<h3>Jane Doe<strong>Job Title</strong></h3>
<a href="#" class="bio-show"><span class="moreorless"></span></a>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui vitae libero pellentesque, quis accumsan enim tincidunt. Nam porta felis ipsum, nec vehicula massa placerat feugiat. Etiam at erat et neque fermentum accumsan. Nulla sit amet augue pellentesque, condimentum diam eget, vestibulum eros.</p>
<p>Nam fermentum eros non turpis suscipit fermentum. Aenean vitae convallis eros. Aliquam lorem odio, pulvinar nec interdum at, laoreet vitae enim.</p>
<p><a href="mailto:hugh.collins@mbsvalue.com" target="_blank">employee@employer.com</a></p>
<p>+1.555.555.5555</p>
<a href="#" class="bio-hide"></a>
</div>
</div>
</div>
</div>
CSS：
#staff-page div {padding: 0px; margin: 0px; height: 190px; position: relative; overflow: visible;}
#staff-page {overflow:visible;}
.bio-show, .bio-show:hover {color: #fff; text-decoration: none;}
.moreorless {padding: 0px 30px 0px 30px;}
.moreorless:after {content: "more"; }
.bio-full .moreorless:after {content: "less"; }
.bio-hide {position:absolute; bottom: 0px; left: 0px; width: 100%; height:30px; background: #B5B5B5 url(../images/arrow-up.png) 50% 50% no-repeat;}
#overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none; z-index: 20;}
.zindex10 {z-index: 10;}
.zindex30 {z-index: 30;}
.clear {clear: both;}
/* For mobile screen */
#staff-page div:nth-of-type(even) {background-color: #f1f1f1; color: #333;}
#staff-page div:nth-of-type(odd) {background-color: #ECA833; color: #fff;}
#staff-page img {float: left;}
#staff-page h3 {float:left; margin:0; padding:0; font-size:18px; font-variant:small-caps; text-transform:lowercase; position:relative; top:80px; left:20px;}
#staff-page h3 strong {display:block; font-size:16px; font-weight:normal; font-variant:normal; text-transform:none;}
#staff-page .bio-show {display:block; position: absolute; width:95px; height:30px; top:160px; left: 190px; background:#D75401 url(../images/arrow-down.png) 10px 55% no-repeat; line-height: 30px;}
#staff-page .bio {padding: 30px; display: none; clear: both; background: inherit; color: inherit; position: relative; overflow: visible;}
#staff-page .bio-full {background:#b5b5b5 url(../images/arrow-up.png) 73px 55% no-repeat!important;}
#staff-page div:nth-of-type(even) img {float: right;}
#staff-page div:nth-of-type(even) h3 {float: right; right:20px; left:auto; text-align: right;}
#staff-page div:nth-of-type(even) .bio-show {display: block; right:190px; left: auto; background:#D75401 url(../images/arrow-down.png) 73px 55% no-repeat; text-align: right;}
/* For medium/small screen */
@media (min-width: 768px) {
/*evens*/
#staff-page div:nth-of-type(4n), #staff-page div:nth-of-type(4n-1) {background: #f1f1f1; color: #333;}
#staff-page div:nth-of-type(4n) img, #staff-page div:nth-of-type(4n-1) img {float: right;}
#staff-page div:nth-of-type(4n) h3, #staff-page div:nth-of-type(4n-1) h3 {float:right; right:20px; left: auto; text-align: right}
#staff-page div:nth-of-type(4n).bio-show, #staff-page div:nth-of-type(4n-1) .bio-show {right: 190px; left: auto; background:#D75401 url(../images/arrow-down.png) 10px 55% no-repeat;}
/*odds*/
#staff-page div:nth-of-type(4n-2), #staff-page div:nth-of-type(4n-3) {background: #ECA833; color: #fff;}
#staff-page div:nth-of-type(4n-2) img, #staff-page div:nth-of-type(4n-3) img {float: left;}
#staff-page div:nth-of-type(4n-2) h3, #staff-page div:nth-of-type(4n-3) h3 {float:left; left:20px; text-align: left;}
#staff-page div:nth-of-type(4n-2) .bio-show, #staff-page div:nth-of-type(4n-3) .bio-show {left: 190px; background:#D75401 url(../images/arrow-down.png) 10px 55% no-repeat;}
}
/* For large screen */
@media (min-width: 992px) {
/*evens*/
#staff-page div:nth-of-type(6n), #staff-page div:nth-of-type(6n-1), #staff-page div:nth-of-type(6n-2) {background: #f1f1f1; color: #333;}
#staff-page div:nth-of-type(6n) img, #staff-page div:nth-of-type(6n-1) img, #staff-page div:nth-of-type(6n-2) img {float: right;}
#staff-page div:nth-of-type(6n) h3, #staff-page div:nth-of-type(6n-1) h3, #staff-page div:nth-of-type(6n-2) h3 {float:right; right:20px; left: auto; text-align: right}
#staff-page div:nth-of-type(6n) .bio-show, #staff-page div:nth-of-type(6n-1) .bio-show, #staff-page div:nth-of-type(6n-2) .bio-show {right: 190px; left: auto; background:#D75401 url(../images/arrow-down.png) 10px 55% no-repeat;}
/*odds*/
#staff-page div:nth-of-type(6n-3), #staff-page div:nth-of-type(6n-4), #staff-page div:nth-of-type(6n-5) {background: #ECA833; color: #fff;}
#staff-page div:nth-of-type(6n-3) img, #staff-page div:nth-of-type(6n-4) img, #staff-page div:nth-of-type(6n-5) img {float: left;}
#staff-page div:nth-of-type(6n-3) h3, #staff-page div:nth-of-type(6n-4) h3, #staff-page div:nth-of-type(6n-5) h3 {float:left; left:20px; text-align: left;}
#staff-page div:nth-of-type(6n-3) .bio-show, #staff-page div:nth-of-type(6n-4) .bio-show, #staff-page div:nth-of-type(6n-5) .bio-show {left: 190px; background:#D75401 url(../images/arrow-down.png) 10px 55% no-repeat;}
}
提前致谢。这个真让我难过。
答案 0 :(得分：0)
.bio {height:auto!important;}
DEMO：http://jsfiddle.net/LL39h/2/
你当前的css中有一些东西增加了一个高度，因为它没有！important很重要。