如何用css动态控制footer的位置

Posted 2023-03-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用css动态控制footer的位置相关的知识，希望对你有一定的参考价值。

比如我要在每个页面下加一个footer，内容就是"copyright...."之类，做在masterpage里面。
我不知道的就是如何动态控制footer的位置，比如上面的内容有1000px，就显示在top: 1050px处，800px就显示在top: 850px处，请问怎么做？

用css动态控制footer的位置，我们可以去换个思路，只要给内容区域的高度有变化，我们将footer公共出来给各个文件调用，然后给每个页面的content区域一个不定长的高度，就解决了，如height：auto；这里通过代码来理解：
<html>
<head>
<style>
.headr
width:900px;
height:30px;
background:#f00 //设置颜色为红色

.content
width:900px;
height:auto; //给content的高度为auto，这样我们在每个页面中foote的位置就是变化的。
background:#0f0 //设置颜色为绿色

.footer
width:900px;
height:200px;
background:#000

</head>
<body>
<div class="headr" > //页头
</div>

<div class="content" > //页面
</div>
<div class="footer" > //页尾
</div>
</body>
</html> 参考技术A 你是放在最下面那就很好办啊，只要放在每个页面的最下面就可以了。你可以这样写css：
.footer
width:1000px; /*这只是举个例子，可以自己设定。
height:200px;

……
<div class="footer">footer内容</div> 参考技术B JS可以做到``
/*前提是FOOTER在main的下方而且上面的内容全部在一个main里面这样就可以了*/
<script>
var main=document.getElementById("main").scrollHeight;/*获取上面main的高度*/
var loc = document.getElementById('footer');
loc.style.top = main+100+'px';/*100是footer的高度好像可以不加.这个我也没试``你试试看行不行*/
</script>

答案补充还有footer的样式position:absolute; 参考技术C 设置margin-top :50px; 参考技术D foot的margin_top:50px

以上是关于如何用css动态控制footer的位置的主要内容，如果未能解决你的问题，请参考以下文章