文章/答案/技术大牛

发布

社区首页 >问答首页 >使页面内容不固定

问使页面内容不固定
EN

Stack Overflow用户

提问于 2014-05-24 10:12:16

回答 2查看 29关注 0票数 1

我有http://jsfiddle.net/EN8CX/

我首先要做的是将默认页面设置为底部有页脚。有比修改内容的高度更好的方法吗？

#content {
min-height:200px;}

我问这个是因为我不能为内容设定一个固定的高度。稍后，我将添加一个搜索函数，它可能需要显示比页面更多的结果，所以我需要一个滚动条。当然，这会把脚往下推。我该怎么做呢？

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-24 10:38:22

我自己也陷入同样的困境，花了一段时间才弄明白。但我想我明白了！因此，您必须稍微修改一下HTML。您需要取出页脚并将其放置在与容器相同的级别上。所以看起来是这样的：

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

在CSS中，使用"vh“单元制作带有整个视口最小高度的”容器“。然后取页脚的高度，并使用它来衬垫底部的内容。取下页脚，向上反转边距，通过再次使用页脚的高度使其达到峰值：

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

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

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

我有一个小提琴在这里运行：http://jsfiddle.net/EN8CX/5/。我还添加了一个按钮来增长内容，这样您就可以看到页脚被按下了。

票数 1

Stack Overflow用户

发布于 2014-05-24 10:26:13

是的，请使用下面的代码。

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

除非您的搜索结果不超过div的100 of高度(即使您有空的搜索结果)，div将是100 of的高度，但是当您的结果变得更大时，div将显示它们的滚动条。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23843763

复制

相似问题

问使页面内容不固定
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使页面内容不固定EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使页面内容不固定
EN