CSS - 粘性页脚[重复]

Posted 2023-03-21

技术标签:

【中文标题】CSS - 粘性页脚[重复]【英文标题】：CSS - Sticky footer [duplicate] 【发布时间】：2014-03-15 08:41:57 【问题描述】：

这个问题似乎有很多已解决的问题，但它们似乎都不适合我......

我创建了这个小 jsfiddle 给你看：jsfiddle footer

还有 CSS：

.footer 
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 

 .container 
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 

 .contentleft 
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 

 .contentright 
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;

我在div.footer 中设置了一个上边框，这应该是可见的，并且边框和div.container 之间有一点空间。

希望你能快速浏览一下代码，看看我做错了什么！

【问题讨论】：

根据定义，粘性页脚不会在用户滚动期间附着在页面上吗？假设这是真的，那么为什么你有 position 的 .footer 相对而不是固定的？嗯...我可能对“粘性”的定义理解错了。我的意思是一个页脚，不管内容有多长，它都会停留在底部。我的页脚这样做了，但不是我想要的...... 关注cssstickyfooter.com @Nit，谢谢链接，但这是我很久以前关注的，但不知何故弄乱了我的 css，现在我完全失去了这个大图...... @SimonJensen 你希望它是什么样子？ 【参考方案1】：

来自James Dean的现代简洁CSS“粘滞页脚”

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html 
    position: relative;
    min-height: 100%;

body 
    margin: 0 0 100px; /* bottom = footer height */

footer 
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;

Demo here

【讨论】：

【参考方案2】：

我不确定这是否是您想要的？ http://jsfiddle.net/2jn3J/19/

我为页脚 div 添加了一个高度为 50 像素的容器，该容器固定在底部。页脚 div 现在绝对位于底部，高度为 30px 的 div，因此留下了 20px 的间隙。

.footer-container 
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;


.footer 
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;


.container

    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */

.contentleft


    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;

.contentright


    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;

【讨论】：

我认为粘性页脚是始终位于其他内容下方的页脚？不是固定的页脚，它始终位于视口的底部。我错了吗？粘性页脚是指页脚“卡”在屏幕底部在您的小提琴的第 13 行将其更改为“margin: 30px auto 2px auto;”然后顶部出现 30px 边距 ***.com/questions/2269369/… - “粘性页脚的意思是保持粘在底部，除非内容长于视口高度。”猜测定义各不相同 sticky footer 最常见的用法似乎是在内容较浅时粘在页面底部的页脚，否则充当正常的底部页脚。 【参考方案3】：

有了 Flexbox，生活变得更轻松了。

.FlexContainer 
  display: flex;
  flex-direction: column;


.Main-Content 
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height


/* Only to distinguish. No need to give body height  */

header 
background-color: red;

main 
background-color: green;

footer 
background-color: blue;


body 
height: 300px;

<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

【讨论】：

【参考方案4】：

您实际上已经接近从 http://www.cssstickyfooter.com/html-code.html 获得的概念，它只需要 html, body height: 100%; 变得“粘性”。

http://jsfiddle.net/2jn3J/22/

如果您想完全正确并获得内容和页脚之间的空间，您将不得不添加另一个带有min-height: 100%; 的div 并从.container 中删除min-height: 100%;。

http://jsfiddle.net/2jn3J/28/

CSS：

html, body  height: 100%; 
.wrap  min-height: 100%; 
.footer 
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;


.container 
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;


.contentleft 
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;

.contentright 
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;

HTML：

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>

【讨论】：

感谢您的回答@Marcel，但这并没有成功。我相信如果 min-height:100% 在包装器或容器中没有区别，但是，改变这个“margin：-30px auto 2px auto;”到这个“边距：30px auto 2px auto;”做好了！ :) 非常感谢您的回答，但这个减号是错误。【参考方案5】：

这是用 css 模拟的表格。页眉和页脚的高度为 100 像素，容器 div 占据了屏幕的所有空间

CSS：

#frame
   display: table;
   height: 100%
   width: 100%;


#header
   display: table-row;
   height: 100px;
   background-color: red;


#container
   display: table-row;


#footer
   display: table-row;
   height: 100px;
   background-color: black;

HTML：

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle（我在正文中添加了一些额外的样式，因为 fiddle 在 iframe 中，但在通常的浏览器行为中你不需要）。

【讨论】：

【参考方案6】：

我刚刚写了一篇关于这个的文章。你可以找到它on medium。

有大量的 CSS 有效解决方案，但我建议使用 javascript 来实现此结果。

这背后的主要思想是，您想知道页脚上方的高度是多少，以及您需要调整页脚顶部的多少才能将其移至底部。这是一个Gist 正是这样做的。

这是执行此操作的代码（假设您的页脚是 ID 为 #footer 的订单）：

window.addEventListener("load", activateStickyFooter);

function activateStickyFooter() 
  adjustFooterCssTopToSticky(); 
  window.addEventListener("resize", adjustFooterCssTopToSticky);


function adjustFooterCssTopToSticky() 
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = bounding_box.top - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) 
    const new_footer_top = window_height - (above_footer_height + footer_height);
    footer.style.top = new_footer_top + "px";
   else if (above_footer_height + footer_height > window_height) 
    footer.style.top = null;
  


function getCssTopAttribute(htmlElement) 
  const top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) 
    return 0;
  
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);

如果您想要更详细的答案，请前往medium article。我还为此写了JS Fiddle。

【讨论】：

以上是关于CSS - 粘性页脚[重复]的主要内容，如果未能解决你的问题，请参考以下文章