页面或内容底部的页脚，以较低者为准

小编典典

页面或内容底部的页脚，以较低者为准

html

我有以下结构：

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

我<article>使用javascript 动态加载内容。因此，<article>块的高度可以改变。

<footer>当有很多内容时，我希望该块位于页面底部；而当仅有几行内容时，我希望该块位于浏览器窗口的底部。

目前，我可以做一个或另一个…但是不能两者都做。

因此，有谁知道我该怎么做-将<footer>其固定在页面/内容底部或屏幕底部，具体取决于哪个较低。

阅读 425

2020-05-10

共1个答案

小编典典

RyanFait的粘性页脚非常好，但是我发现它的基本结构缺乏*。

Flexbox版本

如果您足够幸运，可以在不需要支持旧版浏览器的情况下使用flexbox，那么粘性页脚将变得轻而易举，并支持动态大小的页脚。

使用flexbox使页脚固定在底部的诀窍是使同一容器中的其他元素垂直弯曲。它所需要的只是一个全高包装元素，display:flex其中至少一个具有flex大于的同级元素0：

CSS：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}



html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

#main-wrapper {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  min-height: 100%;

}

article {

  -webkit-box-flex: 1;

      -ms-flex: 1;

          flex: 1;

}

header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}


<div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

如果您不能使用flexbox，我选择的基本结构是：

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

并非离：

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

使页脚粘住的技巧是将页脚锚定到其包含元素的底部填充。这_要求_页脚的高度是静态的，但是我发现页脚通常是静态高度。

HTML：

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

CSS：

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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



#main-wrapper {

  padding: 0 0 100px;

  position: relative;

}



footer {

  bottom: 0;

  height: 100px;

  left: 0;

  position: absolute;

  width: 100%;

}



header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}


<div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

在页脚固定到的情况下#main-wrapper，您现在#main-wrapper至少需要等于页面的高度，除非其子级更长。这是通过做#main-wrapper有一个min-height的100%。您还必须记住它的父母，html并且body必须与页面一样高。

CSS：

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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



html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}



#main-wrapper {

  min-height: 100%;

  padding: 0 0 100px;

  position: relative;

}



footer {

  bottom: 0;

  height: 100px;

  left: 0;

  position: absolute;

  width: 100%;

}



header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}


 <div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

当然，您应该对我的判断提出质疑，因为即使没有内容，此代码也会迫使页脚从页面底部掉下来。最后一个诀窍是要改变由所使用的盒模型#main- wrapper，使得min-height中100%包括100px填充。

CSS：

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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



html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}



#main-wrapper {

  box-sizing: border-box;

  min-height: 100%;

  padding: 0 0 100px;

  position: relative;

}



footer {

  bottom: 0;

  height: 100px;

  left: 0;

  position: absolute;

  width: 100%;

}



header {

  background-color: #F00;

}

nav {

  background-color: #FF0;

}

article {

  background-color: #0F0;

}

footer {

  background-color: #00F;

}


 <div id="main-wrapper">

   <header>

     here be header

   </header>

   <nav>

   </nav>

   <article>

     here be content

   </article>

   <footer>

     here be footer

   </footer>

</div>

有了原始HTML结构的页脚。只是要确保footer的height是等于#main-wrapper的padding-bottom，你应该设置。

*我发现Fait的结构存在缺陷是因为它在不同的层次结构上设置了.footerand.header元素，同时添加了不必要的.push元素。

2020-05-10