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

Posted 2023-03-06

【中文标题】jQuery .height() 没有返回正确的值

【英文标题】：jQuery .height() doesn't return the right value

【发布时间】：2015-08-20 05:35:36

【问题描述】：

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

我在容器 id 上有一个 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

【问题讨论】：

你能澄清“每个屏幕全屏”吗？通常，您只需将高度 100% 应用于 CSS 中的 html 和 body，然后将固定高度应用于 body 中的所需元素。

它必须在每个屏幕尺寸中，不要水平或垂直拉伸，而是通过等比例缩小。边距也应随屏幕尺寸缩放。

对不起，从提供的文字描述中，我仍然无法理解您的要求。您能否绘制所需布局的简单图表（例如在 Paint 中）并将其添加到问题中？这毕竟是一个设计问题，而不是代码问题。

我将在我所拥有的描述中举例说明

【参考方案1】：

使用

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

或

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

根据您的要求。

【参考方案2】：

使用 outerHeight 计算元素的高度，包括边框和内边距。

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

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

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