Question

我对jQuery很新（从字面上开始使用它今天），所以我打赌我错过了一些非常明显的东西。

我正在使用VS 2010中的jQuery 1.5.2和ASP.NET 3.5。我正在尝试动态地将一个div容器的高度设置为另一个div容器的高度。后者div增长以容纳其中的内容，我需要两个高度相等，否则它看起来很糟糕。

我在Site.master文件的标题中尝试了以下代码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var newHeight = $("#content").height() + "px"; //Also tried without  + "px"
        $("#sidebar").height(newHeight);
    });
</script>

这是......做某事。第一个div的顶部与第二个div的底部内嵌呈现;不过，我不太确定它们的高度是否相同。

我现在正在Firefox 10.0.2上使用它;我没有检查任何其他版本或浏览器。

对此有任何帮助。

Answer 1

首先：使用.height而不使用“px”

第二：当文档完全加载时，此代码会将#sidebar的高度设置为#content的高度。

所以，如果您只是想这样做，那么应该使用此代码。

但是，如果元素的高度发生变化（如ajax请求获取更多内容然后将其设置为#content），则每次更改#content的高度时都必须调整#sidebar高度。

关于这些元素的位置问题，你的css应该是一些错误..关于它们的浮动属性......

Answer 2

这对我有用：

<div id="content" style="float:left; width:100px; height: 200px; background: red;">This is the content</div>
<div id="sidebar" style="float:left; width: 50px; background: blue;">This is the sidebar</div>

$(document).ready(function () {
    var newHeight = $("#content").height();
    $("#sidebar").height(newHeight);
});

http://jsfiddle.net/K2fmT/

Answer 3

没有你的px，它没有任何问题。

您也可以使用jQuery API并尝试使用equalizeHeights()来执行此操作，例如：

How to use equalizeHeights

jQuery高度问题（值）

3 个答案: