Question

我已经看过粘性页脚CSS，并试图对我的CSS进行更改，所以我可以得到这个概念，但没有运气因为我无法更改html＆amp;身体到100％的高度。

Here's the sticky footer CSS that I'd like

And here's the link to my web page that I'd like it on

＆安培;这是我的CSS

/* Main content styles */

body {
font-family: Helvetica Neue: Regular;
}

html, body, div, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
}

/* Container */
#container {
margin: 0 auto;
width: 960px;
}

/* Content */
#content {
width: 642px;
float: right;
padding: 20px 0 0 0;
}

#content h1 {
padding: 0 0 20px 0;
margin: 0 0 20px 20px;
border-bottom: 1px solid #94b9c4;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding: 0 25px 0 0;
}


/* Footer */
#footer {
     text-align: left;
     position: relative;
 width: 642px;
 float: right;
 clear: both;
}

   #footer p {
           font-family: Helvetica Neue: Regular;
       font-size: 12px;
           color: #94b9c4;
           padding: 10px 0 0 0;
           margin: 0 0 20px 20px;
           border-top: 1px solid #94b9c4;
   }

Answer 1

使用带有CSS的粘性页脚时唯一重要的代码是页脚的位置属性。在HTML中，确保页脚div是正文的子项：

<强> HTML

<body>
    <div class="content">...</div>
    <div class="footer">...</div>
</body>

它需要成为身体的孩子的原因是因为CSS中的position是基于其最近的祖先的定位。如果您将页脚完全放在另一个<div>内，那么您总是必须认识到该容器的位置。无论如何，CSS应该是这样的：

<强> CSS

.footer {
    position: fixed;
    bottom: 0;
    left: 0; // remove this if you have a specified width for the footer
    right: 0; // remove this too
    height: 100px; // you can change this
}

前面的代码应创建一个页脚，横跨页面的整个底部，高度为100px。无论如何，这都会将页脚粘贴到页面底部。但是，您还必须记住，此页脚需要进行说明，以便它不会涵盖您的内容。我通常会在内容区域的底部添加一个填充，大致与我的页脚高度相同。希望这有帮助！

Answer 2

即使你在问题中使用的这个页脚会起作用，让我告诉你另一种方法，即在CSS和HTML中使用较少的代码。这将创建一个页脚，粘贴到视口底部或内容，具体取决于哪个更长。所以这个问题没有解决。

<强> HTML

<body>
    <h1>Any content without the need of a wrapper</h1>

    <footer></footer>
</body>

<强> CSS

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

body {
    /* the margin compensates the footer's height plus and margin if you want one */
    margin: 0 0 100px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

<强>演示

Try before buy

Answer 3

在页面上，保持身材。例如：

<body>
    <div class="main"> 
        <p>"paragraph"</p>
    </div>
    <footer>
        <p>Created by </p>
    </footer>
</body>

在CSS文件中

body {
  .
  .
  .
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex-grow: 1;
}

如何使用Sticky Footer CSS？

3 个答案: