Chrome for mobile 上的 Javascript div 高度计算答案

【问题标题】：Javascript div height calculation on Chrome for mobileChrome for mobile 上的 Javascript div 高度计算
【发布时间】：2015-08-14 23:36:34
【问题描述】：

我正在尝试在 jQuery 中计算 div 的高度，然后在后续样式中使用所述高度。我无法让它在移动 Chrome（在所有平台上）上运行，但它在桌面浏览器和 iOS Safari 上运行良好。

我正在使用这个 jQuery：

$('#to-be-styled').css({
    'height' :$('#my-div').height(),
    'overflow' : 'hidden'
});

其中my-div 是to-be-styled 中的一个div。

我尝试了$('#my-div').css('height') 和height() 变体（例如outerHeight(true)）但没有成功。

我应该使用什么功能才能在移动 Chrome 上工作？

编辑：

使用的 HTML：

<div id='to-be-styled'>
    <div id='my-div'>text content</div>
    <div id='something-else'>text content</div>
</div>

my-div 没有隐藏，除了字体和大小之外没有其他样式。

我没有在<head> 中设置视口或任何其他响应式标签。

【问题讨论】：

#my-div 被隐藏了吗？ jQuery 在准确计算隐藏元素的高度时存在问题。
能否包含相关的 HTML，您是否在 <head> 中设置视口或任何其他响应式标签？
@Mousey HTML 现在出现在问题中，我还没有设置视口/响应标签。

标签： javascript jquery html css google-chrome

【解决方案1】：

如果你愿意，那么你可以使用媒体查询，jquery 不是移动浏览器的好解决方案。

@media screen and (max-width: 300px) {
    #to-be-styled {
        height: 200px;
        overflow: hidden;
    }
}

【讨论】：

您所说的完全正确，但我认为在这里无关紧要。我假设 OP 希望在容器 elemenet 上设置一个固定高度，以便可以显式计算其他内部元素的位置。
你是否在div里面根据父div写代码然后它会自动调整，不需要做任何额外的事情。
是的，大部分时间都可以，但是当你没有明确高度的父元素时偶尔会出现问题，但一切都是百分比，尤其是max-width。

【解决方案2】：

@Tedfoo - 谢谢。将此 HTML 添加到 <head>:

<meta name="viewport" content="width=device-width">

将其添加到 CSS 中也可能会有所帮助：@-ms-viewport{ width: device-width;} source

按照 Sunny 的建议，在移动设备上使用响应式代码的下一步是在 CSS 中添加媒体查询。但是，如果您正在做一些相当直接的事情，只需将任何固定像素大小更改为百分比，并使用其他可缩放值（如“em”）来设置高度就足够了。例如

<div style="width:100%">
This goes across the full width of the page.</div>

或者对于表格：

<tr style="height:2em"> <!-- this row is double the normal line height-->

Viewport 将处理您需要的大部分内容。如果问题仍然存在，您是否可以检查以找出检测到的高度值或发生了什么错误？

仅限手机编辑

从您的 jquery 看来，您希望两个 div 大小相同，并且在使用手机时不显示 something-else 的内容。为此，您不需要任何 jQuery，只需将其添加到您的 CSS 中，将宽度值设置为用于此布局的最大屏幕尺寸。

@media screen and (max-width:450px)
{
  #something-else { 
       display :"none";
 } 
}

使用 javascipt 编辑

如果<div> 的高度可以更改，则将您的 Jquery 替换为 Javascript。不需要 Jquery，因为加载的 HTML 可以使用 HTML 文档 (DOM) 命令动态编辑，并且只需要一行代码。

您的to-be-styled ID 的名称也是一个问题：使用两个连字符会导致它失败，所以我在下面的代码中对其进行了重命名。 javascript 必须包含在之后 <div>s 被创建，例如在</body> 是一个有用的地方之前。代码是：

<head>
<title>My Code</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="to-style">
  <div id="my-div">text content</div>
  <div id='something-else'>something-else text content</div>
</div>
rest of document

<script>
document.getElementById("to-style").style.height=document.getElementById('my-div').style.height; 
</script> 
</body>

CSS：

#to-style {
overflow:hidden; 
}

将两个高度设置为相等的“副作用”是my-div 会自动尝试将所有文本填充到一个很小的空间中，而不是使用溢出。例如，将高度设置为 2px，您将看到重叠的文本。要解决此问题，您可以通过添加以下代码来隐藏 something-else div：

document.getElementById("something-else").style.display = "none" ;

或您可以像前面部分一样添加 CSS：

    @media screen and (max-width:450px)
{
  #something-else { 
       display :none;
 } 
}

<div>s 具有不同固定初始值的演示：http://jsfiddle.net/3jk3rg7a/2/

【讨论】：

遗憾的是，这并没有解决问题。检测到的高度值是to-be-styled内所有div的组合高度。