CSS-即使没有足够的内容，也将页脚放在页面底部 [英] CSS - Place the footer on the bottom of the page even if no enough content

问题描述

使用 HTML / CSS ，我需要将 footer 放置在页面的 bottom 上即使没有足够的内容.

如果有很多内容导致滚动，则很容易做到这一点.如果没有足够的内容，就会出现问题，因为在这种情况下，页脚会上升.

这里有一张图片可以进一步说明这一点:

我有以下起始代码:

CSS

  body {边距:0;}#header，#content，#footer {内边距:10px;}#header {高度:100px；背景颜色:#abcdef;}#内容 {底部:100px；左:0；正确:0；背景颜色:#F63;溢出:自动；}#footer {位置:固定；底部:0;左:0；正确:0；高度:100px；背景颜色:#abcdef;} 

HTML

 < div id ="header">有标题</div>< div id ="content">你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/>你好世界< br/></div>< div id ="footer">有页脚</div> 

Jsfiddle预览: https://jsfiddle.net/bk5ow9us/(尝试调整窗口高度的大小)

关于如何实现这一目标的任何想法?

重要

我还需要适用于IE(版本> = 11)的可行解决方案，而不仅仅是FF和Chrome.

解决方案

如果愿意，可以使用flexbox粘性页脚布局.

我会使用 min-height:100vh; 而不是 height:100％;

  html，正文{最低高度:100vh；}身体 {显示:flex;flex-direction:列;边距:0;}.内容 {/*包括"0自动"，以实现最佳浏览器兼容性.*/flex:1 0自动;}.页眉页脚 {背景颜色:灰色；白颜色;}  

 < div class ="header">< h2>标题</h2></div>< div class ="content">< h1>内容</h1>< orem ipsum dolor坐着，安全地服从精英.整数nec dioo.Praesent libero.Sed诅咒事前dapibus diam.塞德·尼斯(Sed nisi).Nulla quis sem at nibh elementum imperdiet.Duis sagittis ipsum.毛里乌斯.Fusce nec Tellus sed augue semper门.毛里斯·马萨(Mauris Massa).Vestibulum lacinia arcu eget nulla.每名土著人和每位远见人均获得的类许可.在libero的Curabitur sodales ligula.</p></div>< div class ="footer">< h4>脚</h4></div>  

With HTML / CSS, I need to get the footer be placed on the bottom of the page even if there is no enough content.

In case there is lot of content causing an scroll, is very easy to achieve this. The problem came up when there is no enough content because in that case the footer goes up.

Here you have an image that could clarify this more:

I have the following starting code:

CSS

body {
    margin: 0;
}
#header, #content, #footer {
    padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

HTML

<div id="header">
There is the Header
</div>
<div id="content">
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Jsfiddle preview: https://jsfiddle.net/bk5ow9us/ (try resizing the height of the window)

Any idea on how to achieve this?

IMPORTANT

I need a working solution also for IE (ver >= 11), not just FF and Chrome.

解决方案

You can use a flexbox sticky footer layout if you'd like.

I would use min-height: 100vh; instead of height: 100%; though

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
}

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

这篇关于CSS-即使没有足够的内容，也将页脚放在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！