Html CSS：将DIV放置在页面底部_Html_Css

Html CSS：将DIV放置在页面底部

html css

Html CSS：将DIV放置在页面底部,html,css,Html,Css,这是一个示例HTML页面： <html> <body> <div class="content"> </div> <footer> </footer> </body> </html> 这就是它的样子：我的问题是，假设.content的实际高度可变，我希望红色页脚位于页面底部（而不是视口底部）。如果没有JavaScript，这是可能的吗？显示的页

这是一个示例HTML页面：

<html>
  <body>
    <div class="content"> 
    </div>
    <footer>&nbsp;</footer>
  </body>
</html>

这就是它的样子：

我的问题是，假设

.content

的实际高度可变，我希望红色页脚位于页面底部（而不是视口底部）。如果没有JavaScript，这是可能的吗？

显示的页脚始终位于页面的最低点或视口的底部

当内容未填满页面时，DIV位于视口底部，当内容高于视口时，DIV位于内容下方

要完成此操作，请在

车身上使用min height
，如下所示：
html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
}

在Safari 8.0.3中测试。
你的意思是页脚{position:fixed；}
？@sdcr不，正如我明确写的，我不希望页脚停留在视口的底部，而是页面的底部，即正文。你在内容和页脚上使用位置：绝对值
，有什么特别的原因吗？@sdct:谢谢，有时候解决办法就是这么简单。从帮助内容中删除position:absolute
），实际上这是对我遇到的其他一些问题的修复，但这是一个不同的主题。这不适用于我的content
上的position:absolute
，也不适用于你的main
，使用Chrome和Firefox进行测试。我需要position:absolute
，因为我需要将内容相对于其父内容进行定位。这是因为如果您在内容上使用position:absolute
，将不会为其保留任何空间。如果无法从内容中删除位置：绝对，则需要找到另一种解决方法。
html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
}