Javascript 将页脚粘贴到底部-不带jQuery_Javascript_Html

Javascript 将页脚粘贴到底部-不带jQuery

javascript html

Javascript 将页脚粘贴到底部-不带jQuery,javascript,html,Javascript,Html,在试图解决这个问题时，我只遇到了jQuery插件。但是由于我的站点很小，我只使用jQuery替代我希望实现以下行为：当页面内容无法完全填充视口时，请坚持到底部。如果内容填满了屏幕，只需在内容下方结束即可。根据我从jQuery插件中读到的内容，我需要计算内容的高度，从当前视口中减去该高度，然后查看结果是否为负值但是既然我不使用jQuery，我该怎么做呢我的HTML的结构与此类似： <!DOCTYPE html> <html> <head> &

在试图解决这个问题时，我只遇到了jQuery插件。但是由于我的站点很小，我只使用jQuery替代

我希望实现以下行为：

当页面内容无法完全填充视口时，请坚持到底部。如果内容填满了屏幕，只需在内容下方结束即可。根据我从jQuery插件中读到的内容，我需要计算内容的高度，从当前视口中减去该高度，然后查看结果是否为负值

但是既然我不使用jQuery，我该怎么做呢

我的HTML的结构与此类似：

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
</head>
<body>
    <div id="MainPage">
        <div class="menu"></div>
        <div class="content"></div>
    </div>
    <footer></footer>
</body>
</html>

除了页脚以外的所有内容都在包装分区中。

window.innerHeight提供屏幕的高度，getElementById.height提供元素的高度。因此，在您的情况下，您可以使用纯JS：

if (document.getElementById('MainPage').offsetHeight < window.innerHeight) {
    document.getElementsByTagName('footer')[0].style.position='fixed';
}

window.innerHeight提供屏幕的高度，getElementById.height提供元素的高度。因此，在您的情况下，您可以使用纯JS：

if (document.getElementById('MainPage').offsetHeight < window.innerHeight) {
    document.getElementsByTagName('footer')[0].style.position='fixed';
}

您可以使用以下方法获得不带滚动条/工具栏的浏览器窗口的高度：

window.innerHeight

然后，您可以使用以下方法获取主页面div的高度：

document.getElementById("MainPage").offsetHeight

请注意，如果页面上有水平滚动条，window.innerHeight将包括水平滚动条的高度，因此，如果需要，请考虑水平滚动条的高度

一旦拥有这两个属性，就可以计算所需的大小

如果你只想把页脚贴在页面底部，你也可以使用CSS，例如

footer{
    position: fixed;
    bottom: 0px;
}