CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时，坚持在窗口底部当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。

CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。

当前回答

<body>
    <section class="wrapper">
        <!--Some Content-->
    </div>

    <section class="footer"></section>
</body>

.wrapper {
    min-height: 100vh;
}

.footer {
    top: 100vh;
}

2022-04-15 13:49:57

其他回答

我一直在调查这个问题。我见过不少解决方案，每一个都有问题，通常涉及一些神奇的数字。

因此，我从各种来源的最佳实践中得出了这个解决方案:

http://jsfiddle.net/vfSM3/248/

我想在这里实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是一个简单的CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

2013-09-26 17:09:45

一个非常简单的跨浏览器工作的方法是:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>

2013-11-01 09:02:56

与其他解决方案相比，不需要添加额外的容器。因此，这个解决方案更优雅一些。在代码示例下面，我将解释为什么这样工作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>
        
            html
            {
                height:100%;
            }
            
            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }
        
            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }
            
            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;
                
                background-color: red;
            }
        
        </style>
    </head>
    <body>
        <header>header</header>
        
        
        <footer>footer</footer>
    </body>
</html>

所以我们要做的第一件事，就是让最大的容器(html) 100%html页面和页面本身一样大。接下来我们设置body height，它可以大于html标签的100%，但它至少应该一样大，因此我们使用min-height 100%。

我们也让物体是相对的。相对意味着您可以相对地从原始位置移动块元素。但我们在这里不用。因为相对还有第二个用途。任何绝对元素要么是根元素(html)的绝对元素，要么是第一个相对父元素/祖父元素的绝对元素。这就是我们想要的，我们想要footer是绝对的，相对于主体，也就是底部。

最后一步是将footer设置为absolute和bottom:0，这将把它移动到第一个相对的父/祖父类(当然是body)的底部。

现在我们还有一个问题要解决，当我们填满整个页面时，内容会放在页脚下面。为什么?好吧，因为页脚不再在“html流”，因为它是绝对的。那么我们如何解决这个问题呢?我们将在body中添加padding-bottom。这确保主体实际上比它的内容更大。

2014-12-30 15:43:20

从IE7开始，你可以简单地使用

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

参见caniuse寻求支持。

2013-07-23 09:35:37

我刚才在这里回答了类似的问题

在页眉固定的页面底部放置页脚

我在网页开发方面是新手，我知道这个问题已经有了答案，但这是我发现的最简单的解决方法，我认为在某种程度上是不同的。我想要一些灵活的东西，因为我的网页应用程序的页脚有一个动态高度，我最终使用了FlexBox和一个间隔。

首先设置html和body的高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

我假设我们的应用程序的列行为，在这种情况下，你需要添加一个标题，英雄或任何垂直对齐的内容。

创建spacer类

.spacer {
    flex: 1; 
}

之后你的HTML可能是这样的

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以在这里玩 https://codepen.io/anon/pen/xmGZQL

2018-12-14 20:32:18

CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

推荐文章

最新文章

标签