Question

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

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

由于我正在使用的JavaScript库的限制，我不得不像这样重构我的页面：

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

使用新的父元素实现相同粘性页脚效果的最简单方法是什么？我也可以使用不同的父元素，就像内联元素一样，但这似乎是一个黑客，并没有给我我需要的结果。

这不起作用：

html, body, .app-root{
    height: 100vh;
}

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

Answer 1

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;
}

https://jsfiddle.net/ezova0ty/

Answer 2

试

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

希望我能帮到你了

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

2 个答案: