CSS - 即使内容不足

Question

使用HTML / CSS，即使有footer，我也需要将bottom放在页面的no enough content上。

如果有很多内容导致滚动，很容易实现这一点。当内容不足时会出现问题，因为在这种情况下页脚会上升。

这里有一张图片可以更清楚地说明这一点：

我有以下开始代码：

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预览：https://jsfiddle.net/bk5ow9us/ （尝试调整窗口的高度）

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

重要

  

我还需要IE（ver＆gt; = 11）的工作解决方案，而不仅仅是FF和Chrome。

Answer 1

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

我会使用min-height: 100vh;代替height: 100%;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这两种方式。一个是使用flexbox，并将内容区域设置为flex-grow，因此默认情况下它会填充可用空间。

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    flex: 1 0 0;
    background-color: #F63;
}
#footer {
    height: 100px;
    background-color: #abcdef;
}

<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/>
	hello world<br/>
	hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

或者您可以绝对定位页脚，并使用padding body来预留页脚所在的空间。

* {box-sizing:border-box;}
body {
    margin: 0;
    padding-bottom: 100px;
    position: relative;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    left: 0;
    right: 0;
    background-color: #F63;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

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

Answer 3

我遇到了同样的问题。这解决了它。

\bv1[0-5]\b(*SKIP)(*FAIL)|v\d+