jQuery .height()没有返回正确的值

时间:2015-06-05 09:57:44

标签: javascript jquery height margin

我的网站需要在每个屏幕上全屏显示。出于这个原因,我使用了很多jQuery来确定高度,最大高度,边距......

我在容器ID上有一个margin-top。当我在脚本末尾调用高度(这是确定margin-top的基础)时,它不会给我正确的数量。

只要容器id的高度在var containerh中不正确,var containert也不会正确。

var height = $(window).height();
    var width = $(window).width();
    var containerw = width * 0.9;
    var containerl = containerw * 0.5;
    var containerh = $("#container").height();
    var containert = containerh * 0.5;
    $("#container").css("margin-left", "-" + containerl + "px");
    $("#container").css("margin-top", "-" + containert + "px");
    alert($("#container").height());
* {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    h1 {
      font-family: 'Hobo';
      color: #0070c0;
      font-weight: lighter;
    }

    font {
      color: #ed27b9;
    }

    #container {
      position: absolute;
      top: 46%;
      left: 50%;
    }

    video {
      border: 2px solid #134963;
    }
<center>
  <div id="container">
    <center>
      <h1>Leur <font>&#171; experience &#187;</font> en quelques mots...</h1>
    </center>
    <center id="boven">
      <video class="video2" frameborder="0" poster="../beelden/image39.png" webkitAllowFullScreen mozallowfullscreen allowFullScreen controls>
        <source src="../video/film1.mp4" type="video/mp4">
          <source src="../video/film1.ogg" type="video/ogg">
            <source src="../video/film1.webm" type="video/webm">
              Your browser does not support the video tag
      </video>
      <video class="video2" frameborder="0" poster="../beelden/image40.png" webkitAllowFullScreen mozallowfullscreen allowFullScreen controls>
        <source src="../video/film1.mp4" type="video/mp4">
          <source src="../video/film1.ogg" type="video/ogg">
            <source src="../video/film1.webm" type="video/webm">
              Your browser does not support the video tag
      </video>
    </center>

任何人都可以帮我处理容器的顶部和高度吗?它在我的屏幕上返回552px,但容器ID的高度为546px

我有example

2 个答案:

答案 0 :(得分:2)

使用outerHeight计算元素的高度,包括边框和填充。

$("#element").outerHeight(); // height + padding + border

或者如果你想添加元素的边距

$("#element").outerHeight(true); // height + padding + border + margin

答案 1 :(得分:1)

使用

$("#element").outerHeight();

$("#element").innerHeight();

根据您的要求。