Question

我正在尝试使用javscript将一个元素的高度设置为另一个元素的高度，并且我尝试使用jquery height（）方法，但它不起作用，因为其中一个元素的高度设置为汽车：

#content
{
    background-color:#F2F2F2;
    width:1000px;
    margin:0px auto;
    text-align:left;
    min-height:900px;
    height:auto;
    border-top:5px solid #032F76;
    border-bottom:5px solid #032F76;
    overflow:auto;
}

那么有没有简单的方法来获得高度设置为自动的元素的高度？

Answer 1

jQuery的.height（）方法仍然返回数字高度值，即使它被设置为auto。但请确保考虑边距，填充和边框。

我用你的CSS运行测试只是为了确保和.height（）正常工作 http://jsfiddle.net/ysMge/8/

jQuery有3个高度计算函数，可以不同地考虑边距，填充和边框值。

请查看：

$("#content").height()
$("#content").outerHeight()
$("#content").innerHeight()

http://api.jquery.com/height/
http://api.jquery.com/outerHeight/
http://api.jquery.com/innerHeight/

Answer 2

您可以使用getComputedStyle：

var elem = document.getElementById('content');
var height = window.getComputedStyle(elem,null).getPropertyValue('height');

应返回元素的计算高度（以像素为单位）。

有点contrived JS Fiddle example。

Answer 3

只需使用此代码

$('#content').height();

Answer 4

下面是我的代码示例：

$(document).ready(function() {
  CenterFrameSizer();
});

function CenterFrameSizer(){
  // Sets the left box and the center box the same height.
  if ( $("#leftbox").height() > $("#contentbox").height() ) {
    $("#contentbox").height($("#leftbox").height());
  } else {
    $("#leftbox").height($("#contentbox").height());
  }
}

function GalleryResize(){
  if ( $("#leftbox").height() > $("#gallery").height() ) {
    $("#gallery").height($("#leftbox").height());
  } else {
    $("#leftbox").height($("#gallery").height());
  }
}

如何获得高度为的元素的高度：auto？

4 个答案: