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动态加载，因此高度可能会有所不同。我需要页脚总是在底部，即使对于几乎没有任何内容没有填充页面高度的子页面。目前我的页脚位置绝对，这对于动态内容页面不起作用，页脚卡在内容的中间（原始窗口高度位置）。

有没有办法只做这个css？谢谢！

Answer 1

这样做

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

您还可以阅读所有现代浏览器都支持的flex

<强>更新我读了关于flex并试了一下。它对我有用。希望它能为你做同样的事情。这是我实现的方式。这里的主要部分不是<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 2

方法1：通过将标题和内容包装在一个div中来使用calc（）属性。

＆＃13;

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

＆＃13;

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

＆＃13;

方法2：通过使用包装元素的页脚高度来实现。

＆＃13;

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

＆＃13;

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

＆＃13;

修改

方法3：使用相同的结构和calc（）。

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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加载内容的页脚

3 个答案: