首页 文章

底部带有ajax加载内容的页脚

提问于
浏览 次
0

我有这个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？谢谢！

css position footer

3 回答

  • 0

    做这个

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

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

    Update: 我读了关于flex并试了一下 . 它对我有用 . 希望它能为你做同样的事情 . 这是我实现的方式 . 这里是主要的不是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不支持它 .

    回复于
  • -1

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

    希望能帮助到你 .

    回复于
  • -1

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

    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>

    方法2：使用包装元素的页脚高度 .

    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>

    EDIT

    方法3：使用相同的结构和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>
    回复于

相关问题