1

我查看了粘性页脚 CSS 并尝试对我的 CSS 进行更改，因此我可以得到这个概念，但没有运气，因为我无法将 html 和 body 更改为 100% 高度。

这是我想要的粘性页脚 CSS

这是我想要的网页链接

& 这是我的 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;
   }
4

3 回答 3

1

在 CSS 中使用粘性页脚时唯一重要的代码是页脚的位置属性。在 HTML 中，确保页脚 div 是 body 的子元素：

HTML

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

它需要成为 body 的孩子的原因是因为position在 CSS 中基于其最近祖先的定位。如果您将页脚绝对定位在另一个位置，<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
}

前面的代码应该创建一个跨越整个页面底部的页脚，高度为 100 像素。无论如何，这会将页脚粘贴到页面底部。但是，您还必须记住，需要考虑此页脚，以免它覆盖您的内容。我通常会在内容区域的底部添加一个与页脚高度大致相同的填充。希望这可以帮助！

于 2013-08-26T16:26:46.517 回答
0

尽管您在问题中使用的此页脚将起作用，但让我向您展示另一种方式，即在 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;
}

演示

先试后买

于 2013-08-26T16:23:08.183 回答
0

在您的页面上，保留为正文的子项。例如：

<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;
}
于 2019-08-26T18:53:24.137 回答