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

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

我想让页脚

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

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

当前回答

动态一行使用jQuery

我遇到的所有CSS方法都太死板了。此外，如果页脚不是设计的一部分，那么将它设置为fixed也是不可取的。

测试:

铬:60 FF: 54 即:11

假设如下布局:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

使用下面的jQuery函数:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

它所做的是将#content的min-height设置为窗口高度-页脚的高度，无论当时可能是什么。

由于我们使用min-height，如果#content height超过窗口高度，该函数将优雅地降级，并且不会产生任何影响，因为不需要它。

看看它的实际应用:

$("#fix").click(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> <button id="fix">Fix it!</button> </div> <div id="footer">Mr. Footer</div> </body> </html>

JsFiddle上的相同片段

奖金:

我们可以更进一步，让这个函数适应动态的查看器高度调整，如下所示:

$(window).resize(function() { $('#content').css("min-height", $(window).height() - $("#footer").height() + "px"); }).resize(); * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #111; } body { text-align: center; background: #444 } #content { background: #999; } #footer { background: #777; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="content"> <p>Very short content</p> </div> <div id="footer">Mr. Footer</div> </body> </html>

2017-09-06 06:58:54

其他回答

我的jQuery方法，这一个把页脚放在页面的底部，如果页面内容小于窗口高度，或者只是把页脚放在内容之后，否则:

此外，在其他代码之前将代码保存在自己的附件中，将减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

2013-10-18 08:36:15

我实现了使用CSS网格，基本上我定义了3行:

头内容页脚

并且使用网格来定义大小，诀窍是在行末对齐页脚，像这样:

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

您可以使用更多的行，但请记住将其添加到CSS中，或将所有内容包装在div中。

这篇指南真的帮我找到了答案。

2021-03-22 00:12:56

有些解决方案不适合我，但当我决定使用flex选项时，我发现最好的选择是下面的示例。

html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>

2020-09-09 19:41:25

我使用的一个简单的解决方案，从IE8+工作

在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。

JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

2014-09-19 07:16:52

只需要自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

2018-10-12 03:04:54

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

推荐文章

最新文章

标签