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

html-css083

如何用css动态控制footer的位置,第1张

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

1、想要让文字在底部，需要用到 position:fixedbottom:0pxleft:0px

2、想要让文字居中，需要用到 text-align:center

3、具体代码

<div class="div_foot">   

&copy2017-2018

</div>

.div_foot {

position: absolute

height: 50px

text-align: center

line-height: 50px

width: 100%

扩展资料

HTML的编辑器

1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件，

如：FCK-Editer、E-webediter等在线网页编辑器；

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：

AMAYA（出品单位：万维网联盟）；

FRONTPAGE（出品单位：微软）；

Dreamweaver（出品单位：Adobe）。

参考资料

百度百科-HTML