Question

我有一个包含 3 个 DIV 的网页：

<header></header>
<article></article>
<footer></footer>

标题的高度是已知的，但随着内容的变化而变化。页脚的高度是一个已知的常数。使用 JavaScript，我尝试设置 DIV 的高度，使页脚至少向下推到屏幕底部。如果页面超出屏幕底部，则页脚出现在文章 DIV 下方。

背景：我最初使用 CSS 媒体查询解决了这个问题，其中我将高度计算为：calc(100vh - (header height + footer height));

@media screen and (min-width: 992px) {
  article {
    min-height: calc(100vh - 250px) !important;
  }
}

@media screen and (max-width: 991px) {
  article {
    min-height: calc(100vh - 237px) !important;
  }
}

@media screen and (max-width: 767px) {
  article {
    min-height: calc(100vh - 217px) !important;
  }
}

@media screen and (max-width: 479px) {
  article {
    min-height: calc(100vh - 201px) !important;
  }
}

问题在于移动设备无法识别与桌面设备相同的 100vh。因此，研究告诉我改用 javascript。

使用 JavaScript，我尝试设置 DIV 的高度，以便将页脚至少向下推到屏幕底部。如果页面超出屏幕底部，则页脚出现在文章 DIV 下方.

if (window.innerWidth >= 992) {
      
      document.getElementById('article').style.setProperty('min-height', 'calc(window.innerHeight - 250)');

 } else if (window.innerWidth >= 768 && window.innerWidth <= 991) {

      document.getElementById('article').style.minHeight = "calc( window.innerHeight - 237)";

 } else if (window.innerWidth >= 480 && window.innerWidth <= 767) {
   
      document.getElementById('article').style.minHeight = "calc( window.innerHeight - 217)";
   
 } else if (window.innerWidth <= 479) {
   
      document.getElementById('article').style.minHeight = "calc( window.innerHeight - 201)";
 }

我将

更改为

。

文章DIV的高度没有设置。我不知道为什么。当我尝试提醒 DIV 的高度时，我得到了 UNDEFINED。有没有人明白为什么这不起作用？

我还意识到，在我让代码在页面加载时正确触发后，我需要将它放在一个函数中，并在页面调整大小时随时调用它。我该怎么做？

Answer 1

// alert = function() {};

window.onload = function() { resize(); }
window.onresize = function() { resize(); }

function resize() {
    if (window.innerWidth >= 992){
        alert('Width 1');
        /*document.getElementById('article').style.minHeight = "calc( window.innerHeight - 250)";*/
        document.getElementById('article').style.setProperty('min-height', 'calc(window.innerHeight - 224)');
        alert(document.getElementById('article').height);
    }
    else if (window.innerWidth >= 768 && window.innerWidth <= 991){
        alert('Width 2');
        document.getElementById('article').style.minHeight = "calc( window.innerHeight - 237)";     
    }
    else if (window.innerWidth >= 480 && window.innerWidth <= 767){
        alert('Width 3');
        document.getElementById('article').style.minHeight = "calc( window.innerHeight - 217)";     
    }
    else if (window.innerWidth <= 479){
        alert('Width 4');
        document.getElementById('article').style.minHeight = "calc( window.innerHeight - 201)";     
    }
}

@media screen and (min-width: 992px) {
    article{
    min-height:calc(100vh - 250px) !important;  
    }
}

@media screen and (max-width: 991px) {
    article{
    min-height:calc(100vh - 237px) !important;  
    }
}

@media screen and (max-width: 767px)  {
    article{
    min-height:calc(100vh - 217px) !important;  
    }
}

@media screen and (max-width: 479px) {
    article{
    min-height:calc(100vh - 201px) !important;  
    }
}

article{
  border: 1px solid #000;
}

footer {
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 100%;
}

html, body {
  height: 100%
}

<header></header>
<article id="article"></article>
<footer></footer>

Answer 2

我明白了：

window.onload = function() { resize(); }
window.onresize = function() { resize(); }

function resize() {

    if (window.innerWidth >= 992){
        var H = window.innerHeight;
        H = H  - 250;
        H = H + "px";
        document.getElementById('article').style.minHeight =  H;
    }

    else if (window.innerWidth >= 768 && window.innerWidth <= 991){
        var H = window.innerHeight;
        H = H  - 237;
        H = H + "px";
        document.getElementById('article').style.minHeight =  H;  
    }
    
    else if (window.innerWidth >= 480 && window.innerWidth <= 767){
       var H = window.innerHeight;
        H = H  - 217;
        H = H + "px";
        document.getElementById('article').style.minHeight =  H; 
    }
    
   else if (window.innerWidth <= 479){
        var H = window.innerHeight;
        H = H  - 201;
        H = H + "px";
        document.getElementById('article').style.minHeight =  H; 
    }
}

动态设置div高度

2 个答案: