Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
    text-align: center;
}

#prob {
    background-color: #F00;
    width: 300px;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    vertical-align: middle;
}

#prob img {
    width: 200px;
    height: 150px;
    display: inline;
    vertical-align: middle;
}


</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    var img = new Image();
    img.src = 'http://galerijauspomena.net76.net/images/10042011744.jpg';

    var div = $("#prob").get()[0];
    alert($(window).height()); // First showing good height, but few px larger than a page
    document.getElementById("cont").style.lineHeight = $(document).height() + 'px';

    $(window).resize(
        function(){
            alert($(document).height()); // On resize down or up, its showing always bigger px, even on Firefox freeze browser!
            document.getElementById("cont").style.lineHeight = $(document).height() + 'px';
        }
    );
    div.appendChild(img);

});
</script>
</head>
<body>
<div id="cont">&nbsp; <!-- nbsp in order to line-height to work. Is it any way without it? -->
<div id="prob">&nbsp;</div>
</div>
</body>
</html>

调整大小后，我发现计算出的高度总是更大，尽管我确实调整了大小。我犯了一些错误吗？

此外，在调整大小时，Firefox会自行冻结...

Answer 1

如果我理解您要执行的操作，则需要使用$(window).height()而不是document。问题是增加行高会增加文档的大小，这会增加行高，增加文档大小等等。所以它会不断变大和变大。

调整高度和计算高度 - 错误

1 个答案: