底部有 ajax 加载内容的页脚

Question

我有这个 html 结构，该部分基本上是我的主要内容：

<html>
<head>
<body>
  <nav id="primary">
  <nav id="secondary">
  <section id="maincontainer">
    <div id="main">...</div>
    <footer>
     <div class="footer-inner">...</div>
    </footer>
  </section>
</body>
</html>

在 ID 为 'main' 的 div 中，有通过 ajax 动态加载的内容，因此高度可以变化。我需要页脚始终位于底部，即使对于几乎没有任何内容未填充页面高度的子页面也是如此。目前我有页脚的绝对位置，这对动态内容页面不起作用，页脚卡在内容的中间（原始 window 高度位置）。

有没有办法只 css 做到这一点？谢谢！

Answer 1

Method 1: Using calc() property by wrapping the header and content in one div.

body,html{ margin:0px; padding:0px;height:100%}
.wrapper{height:calc(100% - 50px);}

footer{ height:50px; background:red;}

<div class="wrapper">
  <nav id="primary"></nav>
  <nav id="secondary"></nav>
  <section id="maincontainer">
    <div id="main">...</div>
  </section> 
 </div> 
    <footer>
     <div class="footer-inner">Footer</div>
    </footer>

Method 2: By using -ve height of footer with the wrapper element.

body,html{ margin:0px; padding:0px;height:100%}



.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -50px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 50px; 
}
.site-footer {
  background: red;
}

<div class="page-wrap">
  <nav id="primary"></nav>
  <nav id="secondary"></nav>
  <section id="maincontainer">
    <div id="main">...</div>
  </section> 
 </div> 
    <footer class="site-footer">
     <div class="footer-inner">Footer</div>
    </footer>

编辑

Method 3: using same structure and calc().

body,
html {
  margin: 0px;
  padding: 0px;
  height: 100%
}

#primary {
  height: 50px;
  background: green;
  width: 100%;
}

#secondary {
  height: 50px;
  background: yellow;
  width: 100%;
}

#maincontainer {
  width: 100%;
  height: calc(100% - 130px);
}

#main {
  height: 100%;
}

footer {
  background: red;
  height: 30px;
}

<nav id="primary">Nav 1</nav>
  <nav id="secondary">Nav 2</nav>
  <section id="maincontainer">
    <div id="main">...</div>
    <footer>
     <div class="footer-inner">...</div>
    </footer>
  </section>

Answer 2

这样做

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以了解 flex 所有现代浏览器都支持它

更新： 我阅读了有关 flex 的信息并进行了尝试。它对我有用。希望它对你也一样。这是我 implemented.Here 主要不是 ID 它是 <main> div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里您可以阅读更多关于 flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住，旧版本的 IE 不支持它。

Answer 3

使用bottom:0; position:fixed作为页脚样式你可以轻松实现你想要的。

body,html{ margin:0px; padding:0px;height:100%}



.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -50px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  position: fixed; 
  bottom: 0; 
  width: 100%;
  height:50px;
}
.site-footer {
  background: red;
}

<div class="page-wrap">
  <nav id="primary"></nav>
  <nav id="secondary"></nav>
  <section id="maincontainer">
    <div id="main">...</div>

    <footer class="site-footer">
     <div class="footer-inner">Footer</div>
    </footer>
  </section> 
 </div>

希望对您有所帮助。

底部有 ajax 加载内容的页脚

footer at bottom with ajax loaded content

css

position

footer