Question

我试图在我的页面上找到粘性页脚我尝试通过本教程来完成：https://css-tricks.com/snippets/css/sticky-footer/ 我确实在那里说过，页脚变得粘稠，但是页面上添加了一个滚动条，即使内容没有到达页面的末尾。
我的css：

html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    margin-bottom: -40px; 
}
#wrapper:after {
    content: "";
    display: block;
}
#footer, #wrapper:after {
    height: 40px; 
}

拨弄 https://jsfiddle.net/k3zvaxLs/

Answer 1

要匹配您引用的教程，您必须添加：

* {
      margin: 0;
}

一旦将其添加到您的Css中，您的小提琴就会正常运行

Answer 2

你的h1元素有一个默认的边距，导致你的身体元素被压低。

通过编辑h1的CSS替换边距和填充。

#mainHeader h1 {
  text-align: center;
  color: blue;
  margin: 0;
  padding: 0.67em;
}

这是一个片段。

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  margin-bottom: -40px;
}

#wrapper:after {
  content: "";
  display: block;
}

#footer,
#wrapper:after {
  height: 40px;
}

body {
  direction: rtl;
  margin: 0;
}

#searchWrapper {
  width: 40%;
  margin: 0 auto;
  position: relative;
}

#mainHeader {
  padding-bottom: 15px;
  border-bottom: 2px solid blue;
  margin-bottom: 15px;
}

#mainHeader h1 {
  text-align: center;
  color: blue;
  margin: 0;
  padding: 0.67em;
}

#searchWrapper input[type=search] {
  width: 100%;
  border: 1px solid lightgray;
  height: 30px;
  padding: 5px
}

#searchWrapper input[type=submit] {
  position: absolute;
  transform: translateX(-100%);
  left: 0;
  top: 0;
  bottom: 0;
  height: 30px;
  padding: 5px;
  background-color: lightgray;
  border: 1px solid gray;
}

.result {
  margin-bottom: 15px;
}

.searchResult {
  width: 45%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.url {
  color: green;
}

.searchResult .description {
  font-size: 15px;
  line-height: 16px;
  height: 32px;
  overflow: hidden;
  text-align: right;
}

#pagination {
  text-align: center;
}

#footer {
  padding: 15px;
  text-align: center;
  font-weight: bold;
  background-color: lightgray;
}

＆＃13;

<div id="wrapper">
  <header id="mainHeader">
    <h1>Ami's Search Enginge</h1>
    <div id="searchWrapper">
      <form method="get">
        <input type="search" name="query" placeholder="הזן טקסט לחיפוש" />
        <input type="submit" name="search" value="חפש" />
      </form>
    </div>
  </header>
  <section class="result">
    <article class="searchResult">
      <header class="title">
        <a href="#">כותרת תוצאת חיפוש</a>
        <br />
        <span class="url">http:://www.google.co.il</span>
      </header>
      <section class="description">
        תיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור
        תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור
        תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור
        תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאור
      </section>
    </article>

    <footer id="pagination">
      <a href="#">&lt;</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">&gt;</a>
    </footer>
  </section>
</div>
<footer id="footer">
  All Right Reserved To Ami
</footer>

＆＃13;

Answer 3

你的包装纸高度为身体的100％，高度也是100％，但它也有一个上边距，使得外部总高度大于窗户的高度！

现在您可能认为正文的边距设置为0，但存在边距折叠的问题：#wrapper中#mainHeader中的第一个h1具有默认边距，因此其父级也获得了这些边距。

解决方案：将h1的上边距设置为0。

#mainHeader h1 {
    text-align:center;
    color:blue;
    margin-top:0;
}

New fiddle

Answer 4

html, body {
    height: 100%;
    overflow-x: hidden;
}

粘性页脚添加滚动条

4 个答案: