Question

这是一个愚蠢的问题，但我似乎无法弄明白。基本上我想要div元素的高度。但是一些如何保持返回0.当我检查Chrome中的元素时，它给了我一个高度。代码：

HTML

<div id="signup">
              <div class="panel">
              </div>
</div>

CSS：

.panel
{
  width: 90%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #0071bc;
  padding: 1em;
  border: 0.3em solid;
  border-color: #073b73;
  color: #ffffff;
  position: relative;
  left:0;
  right: 0;
  margin: auto;

}

JQuery的：

alert($("#signup .panel").outerHeight());
alert($("#signup .panel").height());

我在以下方法中使用了以上几行：

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

$(window).load(function(){
});

每当我尝试提醒身高时，我就会一直得到0.我注意到的是，如果我指定一个身高，那么在CSS中，height:361px;或height:40%;我会得到361或40。但我不想要这个。我的面板高度根据其中的元素而变化。一旦渲染，我想要signin的高度。我现在试过......我不知道怎么做。请帮忙。

Answer 1

为什么高度在没有数据的情况下返回为“0”：

这对我来说似乎是对的。 height()返回没有填充和边距的高度。因为元素没有内容（ data ），所以高度返回为0。

为什么它适用于outerHeight：

chrome显示高度的原因是因为你有填充和边框。这就是为什么你得到outerheight()的值。 OuterHeight()将使用填充和边框返回高度。如果你使用outerHeight(true)，你将得到元素的高度加上填充，边框和边距。

注意：

如果你想要一个元素的高度，包括填充而不是边框。您可以使用innerHeight()。如果你想要没有边框高度的填充和边距高度，请innerHeight(true)。

请参阅Documentation：

Answer 2

代码正常工作，如fiddle所示。如果代码不起作用，则问题出在其他地方。确保jQuery已链接，并且控制台中没有错误。

小提琴HTML：

<div id="signup">
  <div class="panel">
    Tons of Content<br>
    Even More Content
  </div>
</div>

小提琴jQuery：

$(document).ready(function(){
  console.log($("#signup .panel").height());
});

无法获得div元素的高度

2 个答案: