底部有ajax加载内容的页脚
底部有ajax加载内容的页脚
提问于 2017-05-11 09:47:00
我有这个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吗？谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-05-11 09:53:16
做这个
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>您也可以阅读flex，它是所有现代浏览器所支持的。
更新：，我读到了关于flex的文章，并试用了它。对我起作用了。希望这对你也是一样的。下面是我如何implemented.Here main不是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的旧版本不支持它。
Stack Overflow用户
发布于 2017-05-11 09:51:30
方法1:使用calc()属性将头和内容包装在一个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>
方法2:通过使用页脚的-ve高度和包装器元素。
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>
编辑
方法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>
Stack Overflow用户
发布于 2017-05-11 10:06:42
使用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>
希望能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43911921
复制相关文章
相似问题
腾讯云开发者
