Html 当我有一个容器div时，如何创建粘性页脚？_Html_Css

Html 当我有一个容器div时，如何创建粘性页脚？

html css

Html 当我有一个容器div时，如何创建粘性页脚？,html,css,Html,Css,我有一个粘性页脚，页面结构如下： <body> <nav></nav> <main-content></main-content> <footer> </body> <body> <div class="app-root"> <nav></nav> <main-content></m

我有一个粘性页脚，页面结构如下：

<body>
    <nav></nav>
    <main-content></main-content>
    <footer>
</body>

<body>
    <div class="app-root">
        <nav></nav>
        <main-content></main-content>
        <footer>
    </div>
</body>

这就是我所追求的“粘性”行为：

试试看

 footer{
     position:fixed;
     bottom:0;
     left:0;
     right:0;
     height:<whatever size your footer needs>
 }

页脚{
位置：固定；
底部：0；
左：0；
右：0；
高度：
}

希望我在这个问题上正确地回答了你，Flexbox是你的朋友。我强烈建议你学习它

.app-root {

  // You wouldnt actually need the height listed like this since your 
  // elems would have actual content.
  height: 1200px;
  width: 100%;
  background-color: pink;

  // Use flexbox for rendering content.
  display: flex;

  // This is telling the content to render vertically rather than
  // the native horizontal rendering.
  flex-direction: column;
}

main-content {

  // Tells this element to take up as much space as it can within
  // its parent.
  flex: auto;
}

nav {
  height: 50px;
  width: 100%;
  background-color: green;
}

footer {
  height: 50px;
  width: 100%;
  background-color: lightblue;
}

我不能使用fixed，因为我希望页脚粘在主要内容的底部。如果内容大于页面高度，则页脚将可见。如果它较小，则会卡在视图端口的底部。看到这里显示的第一张图片：我不明白的是。。。为什么你想向下滚动页面超过需要？也许你可以将应用程序根设置为100%高度？要做到这一点，你需要确定一个立场：绝对完美。谢谢

.app-root {

  // You wouldnt actually need the height listed like this since your 
  // elems would have actual content.
  height: 1200px;
  width: 100%;
  background-color: pink;

  // Use flexbox for rendering content.
  display: flex;

  // This is telling the content to render vertically rather than
  // the native horizontal rendering.
  flex-direction: column;
}

main-content {

  // Tells this element to take up as much space as it can within
  // its parent.
  flex: auto;
}

nav {
  height: 50px;
  width: 100%;
  background-color: green;
}

footer {
  height: 50px;
  width: 100%;
  background-color: lightblue;
}