Question

我有一个非常简单的问题：当我的内容不足以填满屏幕时，页脚会出现，看起来有点乱。您可以在常规笔记本电脑显示器上看到它：http://www.dlgt.co

在那个页面上，强制页脚保持低位的诀窍是什么？我不希望它变得粘稠。我尝试在内容容器（#loading_effect）上设置min-height：100％但没有成功。看起来像px中的特定最小高度可以工作，但这不适用于所有监视器。

谢谢！

Answer 1

尝试将height: 100%添加到html，body和您的主要内容。这会将页脚移动到屏幕外部。通过将与页脚高度相等的负margin-bottom添加到主内容，可以再次向上移动页脚。有关示例，请参阅http://codepen.io/ckuijjer/pen/wbony

编辑：好的，那并没有完全奏效。使用等于页脚高度的min-height: 100%，box-sizing: border-box和padding-bottom重试。见http://codepen.io/ckuijjer/pen/jFgwd

Answer 2

或者尝试将页脚背景用于身体。在使用它之前，您应该重新组织您的结构，所有部分必须具有100％宽度和其他背景。

解决方案在那里：http://codepen.io/anon/pen/kBLar

或者那里 - html：

<header>
  <div class="container">
    <h1>Title</h1>
  </div>
</header>
<article>
  <div class="container">
    Content
  </div>
</article>
<footer>
  <div class="container">
    &copy; Copyright 2014
  </div>
</footer>

和css：

body{
  margin:0;
  background:#222;
  color:#222;
}

header{
  background:#ccc;
}

article{
  background:#fff
}

footer{
  color:#ccc;
}

.container{
  max-width:960px;
  margin:0 auto;
  padding:20px;
}

Answer 3

我想要的是只有在内容不足以填满浏览器窗口（非粘性）时才将页脚放在浏览器视图的底部。

我能够通过使用CSS函数calc（）来实现。现在大多数都支持。您可以使用：

<div class="container">CONTENT</div>
<div class="footer">
</div>

css：

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

将186更改为页脚大小。

即使内容不够大（没有粘性），也要在页面底部强制我的页脚

3 个答案: