CSS溢出-底部分配问题（引导3）

我很抱歉不能在标题中更具描述性（欢迎编辑建议…）

我设计了一个由网格图像组成的团队页面。我已经在Bootstrap3中展示了它的响应能力

当消费者单击图像旁边的“更多”选项卡时，图像下方会显示一个隐藏的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>

提前谢谢。这件事真让我难堪

.bio {height:auto!important;}

演示：

---

在你当前的css中增加了一个高度，因为没有这个高度它就不能工作！重要。

.bio{height:auto！important；}这解决了当前的问题。最好把代码放在你的问题里。其他地方可能有高度，但这解决了问题。就是这样。有一个嵌套的div样式。非常感谢你。有时你看事情太久，看不到明显的东西。

.bio {height:auto!important;}