更改父div高度取决于孩子的绝对div高度&使用javascript进行顶级定位

时间:2018-03-21 19:15:56

标签: javascript jquery html css

这是关于original answer(在顶部定位破坏之前)底部发现的另一个问题。

我的问题是,一旦使用了css属性top,div就会被偏移并从包装父div中流出。

$().ready(function(){
    ch = $('#child-div').height();
    $('#parent-div').css({
        height : ch + 50 + 'px'
    })
});
#parent-div{
    min-height: 400px;
    width: 250px;
    background-color: yellow;
    position: relative;
}


#child-div{
    background-color: red;
    opacity: .8;
    position: absolute;
    height: auto;
    top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent-div'>
    <div id='child-div'>
        <div id="child2">
            Test 2<br />
            Test 2<br />
            Test 2<br />
            Test 2<br />
            Test 2<br />
        </div>
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
        test <br />
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

如果子元素的50top,则添加200是不够的。

此外,在JavaScript中,任何包含以下内容的表达式:

"someString" + someNumber

将导致数字转换为字符串,结果将是连接字符串。如果表达式中唯一的运算符是+(就像你的情况一样,表达式将从左到右进行计算,在你的情况下,这是正常的,但它会打开你的代码以查找潜在的错误线。

最好组织表达式,以便先完成数学运算,然后连接"px"

$(function(){
    ch = $('#child-div').height();
    $('#parent-div').css({
        // Do the math first, then concatenate
        height: (ch + 200) + 'px'
    });
});
#parent-div{
  min-height:400px;
  width:250px;
  background-color:yellow;
  position:relative;

}

#child-div{
  background-color:red;
  opacity: .8;
  position:absolute;
  top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent-div'>
    <div id='child-div'>
      <div id="child2">
        Test 2<br>
        Test 2<br>
        Test 2<br>
        Test 2<br>
        Test 2<br>
      </div>
        test <br>
        test <br>
        test <br>
        test <br>
        test <br>
        test <br>
        test <br>
        test <br>
        test <br>
    </div>
</div>

答案 1 :(得分:-1)

在JQuery中添加额外200个高度以抵消..

$().ready(function(){
    ch = $('#child-div').height();
    $('#parent-div').css({
        height : ch + 250 + 'px'
    })
});