那些遇到过的问题

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

Wil*_*ill 85 html css html5 footer

我有以下结构:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

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

我希望<footer>当有很多内容时,块位于页面的底部,或者当只有几行内容时,在浏览器窗口的底部.

目前我可以做其中一个......但不是两个.

所以有人知道我怎么做 - 让它<footer>坚持到页面/内容的底部或屏幕的底部,取决于哪个更低.

zzz*_*Bov 93

Ryan Fait的粘性页脚非常好,但我发现它的基本结构缺乏*.

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;
}
Run Code Online (Sandbox Code Playgroud) 

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;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
Run Code Online (Sandbox Code Playgroud)

如果你不能使用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>
Run Code Online (Sandbox Code Playgroud)

哪个不是很远:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>
Run Code Online (Sandbox Code Playgroud)

让页脚粘住的技巧是将页脚锚定到其包含元素的底部填充.这要求页脚的高度是静态的,但我发现页脚通常具有静态高度.

HTML: 
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
Run Code Online (Sandbox Code Playgroud) CSS: 
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud) 

#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;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
Run Code Online (Sandbox Code Playgroud)

在页脚固定的情况下#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%;
}
Run Code Online (Sandbox Code Playgroud) 

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;
}
Run Code Online (Sandbox Code Playgroud) 
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
Run Code Online (Sandbox Code Playgroud)

当然,你应该质疑我的判断,因为这段代码迫使页脚从页面底部掉下来,即使没有内容.最后一个诀窍是要改变由所使用的盒模型#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%;
}
Run Code Online (Sandbox Code Playgroud) 

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;
}
Run Code Online (Sandbox Code Playgroud) 
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>
Run Code Online (Sandbox Code Playgroud)

你有它,一个粘性页脚与你原来的HTML结构.只要确保footer's height等于#main-wrapper's padding-bottom,就应该设置好.

*我指手画脚既成事实的结构的原因是因为它设置.footer,并.header在不同的层次级别的元素,同时增加不必要的.push元素.

  • 由于他的网站被转换为In Memoriam通知,因此粘性页脚链接似乎已被破坏.此外,由于robots.txt的设置,因此没有缓存版本 (2认同)

Jos*_*ein 12

Ryan Fait的粘性页脚是一个简单的解决方案,我过去曾多次使用过.

基本HTML:

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>
Run Code Online (Sandbox Code Playgroud)

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
Run Code Online (Sandbox Code Playgroud)

将此翻译为类似于您已经拥有的结果,其中包含以下内容:

HTML:

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>
Run Code Online (Sandbox Code Playgroud)

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
Run Code Online (Sandbox Code Playgroud)

只是不要忘记更新包装器边距上的负数以匹配页脚的高度并推送div.祝好运!

  • 我喜欢他将评论放在底部的方式,适用于页脚解决方案:D (4认同)

归档时间：

查看次数：

73117 次

最近记录：

6 年，5 月 前
相关归档
angularjs换行过滤器没有其他html 85
我可以使用list-style-type来表示div标签吗？ 32
为什么-webkit-transform:translate3d(0,0,0)与固定的孩子混在一起 20
Android和iOS上的HTML5音频有哪些限制？ 10
输入类型="数字"的占位符文本未显示在webkit ICS中 9
我有一个AngularDart组件,如何在每次组件显示时让文本输入字段自动聚焦？ 6
在Web框架中撕下小部件？ 6
HTML 5中的视频捕获 5
Mac上的Chrome浏览器出现问题 5
任何人都可以告诉我为什么这段代码不会创建进入localstorage的条目？ 5
难疑归档
避免!= null语句 3904
适用于Android UserManager.isUserAGoat()的用例？ 3506
Flash CS4拒绝放手 2735
什么是__init__.py？ 2074
在JavaScript中定义枚举的首选语法是什么？ 1982
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
Node.js module.exports的目的是什么,你如何使用它？ 1397
"javascript:void(0)"是什么意思？ 1292
获取JavaScript数组中的所有唯一值(删除重复项) 1273
使用react路由器以编程方式导航 1251