CSS高度问题-容器不会拉伸（没有浮动）

Question

以下是两个链接，它们将显示我的问题： http://www.wontletthisbeatme.com/information.asp

在博客页面上，您会看到内容和容器div很好地延伸到底部，即使内容不需要那么多空间。这将页脚放置在底部，看起来很好。然而，在第二个链接中，信息超出了视图范围，容器div和页脚没有调整以适应额外的内容。

这是我一直以来遇到的问题，但还没有真正掌握这个概念。我已经在我的html和body元素以及我的容器上放置了height:100%，但在CSS中仍然无法有效地处理页脚。我已经查阅了许多网页和先前的帖子，但像我说的那样，无法理解这个问题。任何帮助都将不胜感激。

更新

我对页面进行了一些微调。现在，我看到的最后一个问题是信息页面中的内容div实际上并没有向下延伸。没有浮动，也没有理由可以看到这个div不应该随着其内容而拉伸。有什么建议吗？

- Slevin

Answer 1

我认为这是由于footerContainer的CSS包含属性"position: absolute;"。将其删除可以解决我的问题。 更新：如果从contentContainer中删除属性"height: 100%"，则容器会正确地延伸。但是，我没有分析整个布局。

- Diego

---

移除位置标签会使页脚下降到内容下方，但不会拉伸容器，因此边框也会延伸到页脚底部。此外，删除该位置属性会影响博客页面或任何内容较少的页面。 - Slevin

你的更新好像没有改变什么。不过，我很感谢你的建议。 - Slevin

正如我所写的那样，当我从contentContainer中删除高度时，它会向底部伸展，并包囊所有内容。你这边可行吗？ - Diego

它在信息页面上可以运行，但是对于博客页面或任何包含少量内容的其他部分则无法工作。 - Slevin

Answer 2

这很可能是因为footerContainer div的位置设置为absolute

- Ahmed Aman

Answer 3

你在页脚栏和导航栏上使用了position:absolute。为了解决这个问题，你需要停止在两个元素上使用该属性，这样导航栏就可以将页脚栏推下页面，而不是固定在同一位置。

- Fabian

---

导航栏需要是绝对定位，不会“负责”将页脚向下推。contentContainer应该拉伸内容的高度，然后将页脚放在其下方。 - Slevin

Answer 4

将 .footerContainer 设置为 position: relative（或省略 position 属性）

- Scoregraphic

---

将位置设为相对或移除该属性会将页脚推到内容下方，但不会拉伸边框并且不能保持页脚在内容很少的页面底部。 - Slevin

Answer 5

使用方法如下：

.clear{clear:both; display:block; line-height:0%;}

使用 .clear 方法

<div class="clear"></div>

- Yoosuf Mo

---

在程序设计中，使用<div class="clear"></div>来分隔内容和页脚。 - Yoosuf Mo

Answer 6

我猜测目前没有查看源代码，可能是多了或少了一个 <div> 或 </div> 标签被添加或删除了...

- test

---

将两者都通过http://validator.w3.org或其他验证器运行。information.asp中肯定有更多的错误。使用与开放标签相同数量的关闭标签来正确构建结构，事情可能会变得更清晰，至少如此。 - Matt Gibson

我更正了很多错误。在将HTML和CSS交给合作伙伴转换为ASP并填充内容之前，我会对其进行验证。他不太关心正确的验证。 - Slevin

Answer 7

你所描述的需求听起来与Making a footer not rise above the bottom of the screen without extraneous markup中表达的问题非常相似，我和原始提问者Jason Christa都提出了可行的解决方案。该链接有一个特定的要求，即不使用包含div，但我认为其中的概念对你的应用程序应该很有用。

- ScottS

---

我已经稍微审查了一下这篇文章，以及其中一个答案提供的示例链接，但是我并没有能够使其在我的情况下真正起作用。 - Slevin