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

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

当前回答

我自己有时也与此斗争，我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。我只是胡乱摆弄了一下，我个人发现这是有效的，而且这当然是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS，然后编写您的HTML

2017-07-10 21:16:05

其他回答

flex解决方案对我来说是有效的，因为它使页脚变得有粘性，但不幸的是，将页面主体改为使用flex布局会使我们的一些页面布局发生变化，而且不是更好的。最后对我有用的是:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

我从ctf0在https://css-tricks.com/couple-takes-sticky-footer/的回复中得到了这个

2018-08-30 23:46:32

尝试在内容和侧栏周围放置容器div(带有overflow:auto)。

如果这不起作用，您是否有任何页脚显示不正确的截图或示例链接?

2008-09-03 18:55:48

保持<main>为min-height 90vh将永远解决您的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚，所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

2022-08-11 18:51:25

由于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

使用绝对定位和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

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

推荐文章

最新文章

标签