jquery - 当隐藏的 div 可见时无法扩展 div 高度

Question

我有一个 <div>包含另一个 <div> ，它又包含一系列 <div> s，可以切换。我设置了前两个 <div>我们有 height: 100%; .所以现在当我有太多<div> s 可见并且不适合屏幕，主要 <div>不扩展，让 bg 成为 body 的颜色。

这是(简化的)html 的方式看起来像:

<div id="wrapper">
    <div class="col" id="col1"></div>
    <div class="col" id="col2"></div>
    <div class="col" id="col3"></div>
</div>

和相关的CSS :

body, html {
    background-color: darkgray;
    margin: 0;
    height: 100%;
    width: 100%;
}

#wrapper {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    margin-top: 0;      
    margin-bottom: 0;
    padding: 0;
    background-color: #666;
    color: white;
    min-width: 722px;
    max-width: 1119px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0px 0px 25px black;
}

.col {
    /*background-color: red;*/
    height: 100%;
    float:left;
    margin-top: 0;
    margin-right: 0.6667%;
    margin-left: 0.6667%;
}

#col1 {
    width: 24%;
}

#col2 {
    width: 48%;
    box-shadow: 0px 0px 5px black;
}

#col3 {
    width: 24%;
}

这是它在 jsfiddle 中的样子.

下面是问题的截图: 我试图将以下代码添加到 jQuery (在 .click 函数内)解决问题:

var top = $('#col2:last-child').position().top;

var bottom = top + $('#col2:last-child').height();
$('#wrapper').css('height', bottom);

在 chrome 中，控制台中出现以下错误:

Uncaught TypeError: Cannot read property 'top' of undefined 

我真的很想在 CSS 内解决这个问题如果可以的话。

Answer 1

您可能希望将 overflow:auto; 添加到 #wrapper。 JsFiddle

要么那样，要么清除你的div

编辑:您可以将 #wrapper 设置为 height:auto; 如果您想让它环绕整个文本，而不是滚动。 JsFiddle