Html 即使没有足够的内容，也在页面底部显示页脚_Html_Css

Html 即使没有足够的内容，也在页面底部显示页脚

html css

Html 即使没有足够的内容，也在页面底部显示页脚,html,css,Html,Css,我试图在页面底部显示页脚，即使没有内容，而且似乎也能正常工作。但是，您必须滚动才能看到页脚。它就在您滚动之后，而不是立即在页面底部。我不知道我做错了什么。这是我的密码： <body> <div id="root"> <div class="app"> <div class="wrapper"> <div class="nav">

我试图在页面底部显示页脚，即使没有内容，而且似乎也能正常工作。但是，您必须滚动才能看到页脚。它就在您滚动之后，而不是立即在页面底部。我不知道我做错了什么。这是我的密码：

<body>
    <div id="root">
        <div class="app">
            <div class="wrapper">
                <div class="nav">
                    <div>
                        <header class="header">
                            <div>
                                <ul>
                                    <li>Title</li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>About</li>
                                </ul>
                            </div>
                        </header>
                    </div>
                </div>
            </div>
            <div class="footerWrap">
                <div>
                    <footer>
                        <div class="copyright">
                            <div class="text">© 2018 Footer</div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>

这将使页脚始终显示在页面底部。我们使页脚包装具有

位置：绝对

，并使用

底部：0

将其推到底部<代码>左侧：0删除水平滚动条

html {
  position: relative;
  min-height: 100%;
}
.footerWrap {
  position: absolute;
  background-color: green;
  width: 100%;
  bottom: 0;
  left: 0;
}

这是一张工作票。为了便于阅读，我去掉了所有多余的div，添加了

标记以扩展页面内容。

获取窗口高度（比如w）和页脚高度（比如f）。然后将内容框的最小高度设置为（w-f）。这样，若并没有内容，页脚将始终显示在底部，若有内容，页脚将显示在内容之后

您可以尝试flex布局方法


...
...
...

.Site{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
}
.网站内容{
弹性：1；
}

您的

最小高度

缺少一个值谢谢@Alec，我更新了问题。最小高度为100%。我在问问题时打了个错字，你们是否希望你们的页脚出现在页面底部，不管是否有内容？我不太明白你的问题。虽然页脚在页面上似乎总是相对的，并出现在内容的底部，但出现在“页面”的底部有点奇怪，因为谁来决定页面的底部是什么？如果一个页面没有太多内容，这看起来就不太好。@Alec，我希望页脚显示在页面底部，如果没有足够的内容，而如果有足够的内容填充页面，则在内容后面显示页脚。i尝试移除底部填充物：100px；它解决了问题，但如果有内容，它将位于页脚组件的顶部。不知道如何使这两种方法都有效当内容未满时，它工作得很好，但一旦有更多的内容，它就会在页脚上断裂。当内容通过页脚时，是否可以将页脚保持在内容下方示例（可能必须调整预览大小）：@stevew1现在检查答案，我更新了代码笔和样式。在codepenIt工作看起来像是我干的。当没有内容时，它不工作，页脚折叠到顶部。例如：@stevew1现在就测试一下，对不起！我切换了html和body标记，但是html标记需要最小高度为100%

html {
  position: relative;
  min-height: 100%;
}
.footerWrap {
  position: absolute;
  background-color: green;
  width: 100%;
  bottom: 0;
  left: 0;
}