使用JavaScript將margin-top設置為頁面的高度

Question

我正在嘗試使用JavaScript將div的邊距頂部設置為窗口的高度減去220px。 我希望此值在窗口更改大小時更改。

這是我目前擁有的：

HTML

<body onresize="heroHeight()" onload="heroHeight()">
   <div class="heroImage"></div>
   <div class="content">
      <!-- page content -->
   </div>
</body>

CSS

.content {
   margin-top: 0;
   width: 100%;
}

最后是我的JavaScript：

function heroHeight() {
   var heroCurHeight = document.getElementsByClassName("content")[0];
   heroCurHeight.style.marginTop = (window.outerHeight - 220);
}

知道我在做什么錯嗎？

謝謝！

Answer 1

CSS動態余量

當您可以在CSS中完成相同的操作時，使用JS似乎太復雜了（當然，我不知道您的用例）

.heroImage {
  margin-top: calc(100vh - 220px);
}

CSS vh是表示視口高度的百分比單位。 （當視口更改大小時自動更新）

CSS calc()用於對多種單位類型進行數學運算。

編輯：

如果您要堅持使用Javascript ...

您確實需要注意性能，並且僅在用戶搞砸了窗口大小時才運行該功能。 這稱為“反跳”功能。 這是技術的很好概述。

Answer 2

您必須指定單位

heroCurHeight.style.marginTop = (window.outerHeight - 220) + 'px';

Answer 3

您的問題出在這一行：

heroCurHeight.style.marginTop = (window.outerHeight - 220);

如果未與某些單位（例如“ px”）一起設置，則無法設置頁margin-top 。 因此，您只需要將錯誤的行代碼更改為此：

heroCurHeight.style.marginTop = `${(window.outerHeight - 220)}px`

遵循完整的工作示例：

 function heroHeight() { const heroCurHeight = document.getElementsByClassName("content")[0]; heroCurHeight.style.marginTop = `${(window.outerHeight - 220)}px` ; }

 .content { margin-top: 0; width: 100%; height: 50px; background-color: red; }

 <body onresize="heroHeight()" onload="heroHeight()"> <div class="heroImage"></div> <div class="content"> <!-- page content --> </div> </body>

使用JavaScript將margin-top設置為頁面的高度

問題描述

3 個解決方案

解決方案1
1 2019-08-27 17:04:37

CSS動態余量

如果您要堅持使用Javascript ...

解決方案2
0 2019-08-27 15:59:58

解決方案3
0 2019-08-27 16:03:19

使用JavaScript將margin-top設置為頁面的高度

問題描述

3 個解決方案

解決方案1 1 2019-08-27 17:04:37

CSS動態余量

如果您要堅持使用Javascript ...

解決方案2 0 2019-08-27 15:59:58

解決方案3 0 2019-08-27 16:03:19

解決方案1
1 2019-08-27 17:04:37

解決方案2
0 2019-08-27 15:59:58

解決方案3
0 2019-08-27 16:03:19