这是关于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>
答案 0 :(得分:1)
如果子元素的50
为top
,则添加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'
})
});