如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

大多数答案使用固定值的css。虽然它可能工作，但当页脚更改时，需要调整页脚大小的固定值。另外，我使用的是WordPress，不想打乱WordPress主题为你定义的页脚大小。

我用一点javascript解决了这个问题，只在需要时触发。

    var fixedFooter = false;
    document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
    window.addEventListener("resize", function() {fixFooterToBottom();}, false);
    function fixFooterToBottom()
    {
        var docClientHeight = document.documentElement.clientHeight;
        var body = document.querySelector("body");
        var footer = document.querySelector("footer");

        fixedFooter = fixedFooter ? (body.clientHeight  + footer.clientHeight ) < docClientHeight :  body.clientHeight < docClientHeight;
        footer.style.position = fixedFooter ? "fixed" : "unset";
        footer.style.left = fixedFooter ? 0 : "unset";
        footer.style.right = fixedFooter ? 0 : "unset";
        footer.style.bottom = fixedFooter ? 0 : "unset";
    }

2022-12-21 19:07:12

其他回答

一个老线程我知道，但如果你正在寻找一个响应式的解决方案，这个jQuery添加将有助于:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完整的指南可以在这里找到:https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

2016-08-29 06:08:49

使用绝对定位和z-index创建一个粘脚div在任何分辨率，使用以下步骤:

创建一个脚注div, position: absolute;底部:0;以及期望的高度设置页脚的填充，以便在内容底部和窗口底部之间添加空白创建一个容器div，用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充，它等于高度加上页脚的填充如果页脚被剪切，则设置页脚的z-index大于容器div

这里有一个例子:

<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

2012-08-26 12:47:14

由于Grid解决方案还没有给出，下面是它，如果我们将height: 100%和margin: 0视为理所当然，则只对父元素进行了两个声明:

html, body {height: 100%} body { display: grid; /* generates a block-level grid */ align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */ margin: 0; } .content { background: lightgreen; /* demo / for default snippet window */ height: 1em; animation: height 2.5s linear alternate infinite; } footer {background: lightblue} @keyframes height {to {height: 250px}} <div class="content">Content</div> <footer>Footer</footer>

align-content:之间的空间

项目沿对齐容器均匀分布横轴。每对相邻项之间的间距为相同。第一项与主启动边齐平，最后一项与主启动边齐平项目与主端边缘齐平。

2018-09-21 09:27:52

对于自然的页眉和页脚高度使用CSS Flexbox。

参见JS Fiddle。

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

2017-06-27 02:18:37

下面是一个使用jQuery的解决方案，它就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则更改页脚的边距顶部以进行补偿。在Firefox, Chrome, Safari和Opera中测试。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果你的页脚已经有一个边距顶部(50像素，例如)，你将需要改变最后一部分:

css( 'margin-top', height_diff + 50 )

2012-02-18 23:36:29

如何让页脚保持在网页的底部?

推荐文章

最新文章

标签