移動Chrome上的Javascript div高度計算

我想計算jQuery中div的高度，然後在後續樣式中使用所述高度。我無法使用移動Chrome（在所有平臺上）工作，但它在iOS Safari上的桌面瀏覽器&上運行良好。移動Chrome上的Javascript div高度計算

我使用這個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>中設置視口或任何其他響應標籤。

來源

2015-08-13 Tedfoo

是否有'＃my-div'被隱藏了？ jQuery有精確計算隱藏元素高度的問題。 –

你可以包含相關的HTML，並且你在''中設置了視口或其他響應標籤嗎？ – Mousey

@Mousey HTML現在在問題＆我沒有設置視口/響應標籤。 – Tedfoo

如果你想然後你可以使用媒體查詢，jquery不是很好的解決方案，適用於手機瀏覽器。

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

來源

2015-08-13 11:21:09 Sunny

你在說什麼是完全正確的，但我認爲這是無關緊要的。我假設OP想要在容器elemenet上設置一個固定高度，以便可以明確計算額外內部元素的位置。 –

你有沒有在div裏面編寫基於父div的代碼，然後它會自動調整，不需要做任何額外的事情。 – Sunny

是的，大部分時間都可以工作，但是如果沒有明確高度的父元素，偶爾會出現問題，但是一切都是百分比，特別是使用'max-width'時。 –

@Tedfoo - thanks。這個HTML添加到<head>：

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

添加這對CSS也可能會有所幫助：@-ms-viewport{ width: device-width;}source

對手機響應代碼，使用你的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-->

視口將處理許多你所需要的。如果問題仍然存在，那麼您是否可以檢查以找出檢測到的高度值或發生了什麼錯誤？

編輯的手機只

從你的jQuery它看起來像你想兩個div是相同的尺寸，並使用手機時不顯示的something-else內容。要做到這一點，你不需要任何jQuery，只需將它添加到你的CSS，設置寬度值爲這個佈局使用的最大屏幕尺寸。

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

與javascipt的編輯

如果<div>的高度可以改變則更換使用JavaScript的jQuery的。不需要Jquery，因爲可以使用HTML文檔（DOM）命令動態編輯加載的HTML，並且只需要一行代碼。

您的to-be-styled ID的名稱也是一個問題：使用兩個hypens會導致它失敗，所以我在下面的代碼中重命名了它。 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，您將看到例如重疊的文字。與不同的固定的初始值

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

演示：

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

或您可以添加CSS如前面的部分：要解決這個問題，你可以通過添加該代碼隱藏something-else DIV <div> s：http://jsfiddle.net/3jk3rg7a/2/

來源

2015-08-13 17:23:53 Mousey

這可悲的是沒有解決這個問題。檢測到的高度值是「所有樣式」內所有div的組合高度值。 – Tedfoo

移動Chrome上的Javascript div高度計算

回答

相關問題