CODEWITHSUNDEEP
javascriptjqueryheightmargin
DNA
DNA

Reputation: 137

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

Upvotes: 2

Views: 1920

Answers (2)

Deepak gupta
Deepak gupta

Reputation: 554

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

Upvotes: 2

PHP Worm...
PHP Worm...

Reputation: 4224

Use

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

or

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

according to your requirements.

Upvotes: 3

Related Questions