html - 粘性页脚添加滚动条

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; 
}

fiddle https://jsfiddle.net/k3zvaxLs/

Answer 1

您的 h1 元素有一个默认边距，这导致您的 body 元素被下推。

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

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

这是一个片段。

* {
  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;
}

<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>