页面底部或内容（以较低者为准） [英] Footer at bottom of page or content, whichever is lower

查看：101
本文介绍了页面底部或内容（以较低者为准）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下结构：

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

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



$ c>< footer> 块在页面底部有很多内容，或者在浏览器窗口底部只有几行内容。 p>

目前我可以做一个或另一个...但不是两个。



所有人都知道我该怎么做 - 让< footer> 页面/内容或屏幕底部，具体取决于哪个较低。

解决方案



我的基本结构选择是：

 < 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>这里是头< / header> < nav> < / nav> < article>这里是content< / article> < footer>此处为页脚< / footer>< / div>



在页脚锚定到＃main-wrapper 时，现在需要＃main-wrapper 页面，除非它的孩子更长。这是通过＃main-wrapper 有 min-height 的 100％ / code>。您还必须记住，其父母 html 和 body 也需要与页面一样高。 / p>

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>这里是头< / header> < nav> < / nav> < article>这里是content< / article> < footer>此处为页脚< / footer>< / div>



当然，你应该质疑我的判断，因为这段代码迫使页脚从页面底部脱落，即使没有内容。最后一个诀窍是改变＃main-wrapper 使用的框模型，使 min-height code> 100％包括 100px 填充。





  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>这里是头< / header> < nav> < / nav> < article>这里是content< / article> < footer>这里是页脚< / footer>< / div>



你有它，一个粘性页脚与你原来的HTML结构。只需确保 footer 的 height 等于＃main-wrapper ' padding-bottom ，您应该设置。





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;显示：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>这里是头< / header> < nav> < / nav> < article>这里是content< / article> < footer>这里是页脚< / footer>< / div>



<

*我发现Fait结构的错误的原因是因为它设置 .footer 和 。 $


I have the following structure:

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

I dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.

I want the <footer> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.

At the moment I can do one or the other... but not both.

So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.

解决方案

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

My base structure of choice is:

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

Which isn't all that far off from:

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

The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.

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>

With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.

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>

Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.

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>

And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 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>

* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.

这篇关于页面底部或内容（以较低者为准）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆