Question

首先我要做的是设置默认页面，使页脚位于底部。有没有比修改内容高度更好的方法？

#content {
min-height:200px;}

我问这个是因为我无法为内容设置固定的高度。稍后我会添加一个搜索功能，可能需要显示比页面更多的结果，所以我需要一个滚动条。当然，这会打倒页脚。我该怎么办？

Answer 1

我自己处于同样的困境中，并花了一些时间才弄明白这一点。但我想我明白了！所以你必须稍微修改你的HTML。您需要取出页脚并将其放在与容器相同的级别。所以它看起来像这样：

<body>
  <div id="container">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</body>

在CSS中，制作＆＃34;容器＆＃34;使用＆＃34; vh＆＃34;整个视口的最小高度;单位。然后取出页脚高度并用它来填充内容的底部。取下页脚并向上翻转边距，再次使用页脚的高度使其达到峰值：

#container {
  ...
  min-height: 100vh;
}

#content {
  ...
  padding-bottom: 70px; // if footer height = 70px;
} 

#footer {
  ...
  margin-top: -70px;
}

我在这里跑步：http://jsfiddle.net/EN8CX/5/。我还添加了一个按钮来增加内容，以便您可以看到页脚被推下来。

Answer 2

是的，为此目的使用以下代码。

<div style="height:100px;overflow-y:auto">
</div>

直到你的搜索结果没有超过div的100px高度（即使你有搜索结果为空），div的高度为100px，但随着你的结果变大（展开），div会为它们显示滚动条。

使页面内容不固定

2 个答案: