您的位置：首页 > Web前端 > CSS

利用CSS使footer固定在页面底部的实例代码

2016-05-13 09:15 771 查看

1. HTML基本结构

<!DOCTYPEhtml>

<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">

<headrunatheadrunat="server">

<title>layout</title>

</head>

<body>

<divclassdivclass="header">

<h1>head of your website.</h1>

</div>

<divclassdivclass="wrapper">

<divclassdivclass="content">

<h2>Your website content here.</h2>

<scripttypescripttype="text/javascript">

for(var i = 0; i<100;i++){

document.write(i + "<br />");

}

</script>

</div>

<divclassdivclass="clear"><!-- 必不可少 --></div>

</div>

<divclassdivclass="footer">

<div><h1>

Copyright (c) 2012</h1></div>

</div>

</body>

</html>

2. CSS样式

<styletype="text/css">

*{

margin: 0;/* 把默认值都设为0 */

}

html, body

{

height: 100%;

width:85%;

margin:0auto;/* 居中 */

}

.header

{

height:100px;

background-color:Fuchsia;

}

.wrapper

{

min-height: 100%;/* IE6 hack*/

height: auto!important;/* height优先级 */

height: 100%;

margin: 0auto-4em;/* 负值必须等于footer的高度 */

}

.content

{

background-color:Silver;

}

.clear/* 清除浮动 */

{

height: 4em; /* clear的height必须和footer的值样高 */

clear:both;

}

.footer

{

height: 4em;

background-color:Aqua;

}

</style>

以上这篇利用CSS使footer固定在页面底部的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css footer 固定底部

相关文章推荐

新的分享

章节导航