jQuery .height() doesn't return the right value

问题

I have a website that needs to be fullscreen at every screen. For this reason I use alot of jQuery to determin the height, max-height, margins, ...

I have a margin-top on the container id. When i call the height, which is the base of determing the margin-top, at the end of the script, it does not give me the right amount.

As long as the height of the container id is not right in var containerh, var containert will not be right either.

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>

Can anyone help me with the margin-top and height of the container? It returns 552px at my screen, but the height of the container id is 546px

what i have example

回答1:

Use

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

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

according to your requirements.

回答2:

use outerHeight to calculate height of element including border and padding.

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

or If you want to add margin of element also

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

来源：https://stackoverflow.com/questions/30663633/jquery-height-doesnt-return-the-right-value

标签

javascript

jquery

height

margin