Question

我在实现粘性页脚解决方案时遇到了这个问题。我的页脚工作得很好，但是包含标签内所有内容的我的body元素不会自动延伸到一个随机点以下，只能向下滚动（这是一个冗长的页面）。我的意图是身体容器（这听起来是病态的还是什么？）自动延伸到它包含的所有div元素。这不是应该做的吗？现在仍然有div元素从它结束的地方进一步向下，并且页脚位于我页面正下方的中间。如果我无法实现这种行为，我将不得不将主体设置为css中的固定位置，我不想这样做。

使用以下CSS样式不起作用，可能是因为我的内容超出了页面。

html, body {min-height: 100%; height: 100%;}

有人能说出最可能出现的问题吗？另外，请随意对我的代码做出任何建设性的评论。这是我的第一个网络项目。

以下是CodePaste上我的HTML代码的链接：HTML Code

这是我的CSS代码的链接：CSS Code

最后，链接到我的网页的屏幕截图，显示问题。 Screenshot 绿色栏是页脚，红色边框是用css设计的主体元素，因此可以查看。你会看到它在照片后面结束。

Answer 1

我很确定您的主要问题是设置正文标记的高度。尽量不给它一个高度（没有max-height或height标记）或给予它height: auto使其扩展为内容。

也可能是您将子元素设置为positon: absolute ，这意味着父元素将折叠到其中包含的非绝对元素的大小。

另外，为什么<p1>标签？它们应该只是<p>。

代码批评：

要弄清楚问题是什么是非常困难的，而且由于你展示代码的方式，我不确定我是否提供了正确的解决方案。将来，尝试将您的代码作为JSFiddle或Codepen。

另外，请考虑使用CSS框架，这将减少您编写的CSS代码量。我建议使用Bootstrap或Materialize，但Bootstrap的使用范围更广。

不要忘记关注CSS guidelines，这将使您的代码更具可读性。

Answer 2

我不确切地知道问题是什么，但我进行了一些实验，并认为如果你从1移除<p1>，那么你就会有一个正常{{1}标签，它完全移动文本。我有一个非常粗糙的JS Fiddle。

Answer 3

您可以使用vh将元素拉伸到窗口的整个高度。

.container{
    height: 100vh;
}

然后，您可以使用绝对位置将页脚放置到底部。

footer{
    position: absolute;
    bottom: 0;
}

我过去曾使用此功能来查看不能滚动的整页目标网页。

Answer 4

感谢所有贡献者。根据Sankarsh和Ori的建议，我能够解决问题。一旦我按照他们的建议将我的div更改为

，我注意到它开始按照我的意图运行并强制将父元素放在它下面。不幸的是，这仅仅解决了该元素的问题。这导致我发现

元素有一个默认的＆＃34;静态＆＃34;位置，而我的其他大部分元素都设置为＆＃34;绝对＆＃34;。将我的大部分内容的位置更改为＆＃34; relative＆＃34;或者＆＃34;静态＆＃34;，一切都按预期工作！

TLDR：如果您希望子元素保持在其父元素的边界内，则需要将子元素的位置设置为＆＃34; static＆＃34;或者＆＃34;亲戚＆＃34;。你不能使用＆＃34;绝对＆＃34;。这样，孩子不会溢出父母的边界，而是自动将父母的边界扩展到预期的位置。

Body div元素不会延伸到页面上的某个点

4 个答案:

代码批评：