在CSS实现Footer置底的几种方式

html-css023

在CSS实现Footer置底的几种方式,第1张

用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部,内容区域,还有底部,一般都是使用三个div,然后id分别设置为header,content,footer,然后在定义每个div的高度,一般来说,header,footer都是公共的,因为高度,内容一般都是固定的,底部的区域,举个例子:

<html>

<head>

<style>

#header{

width:960px//通过id来控制

height:200px

}

@content{

width:960px//通过id来控制

height:auto //内容区域的高度一般都是auto的

}

#footer{

width:960px//通过id来控制

height:200px

}

</style>

</head>

<body>

<div id='header'>

<p>我是头部区域</p>

</div>

<div id='content'>

<p>我是内容区域</p>

</div>

<div id='footer'>

<p>我是低部区域</p>

</div>

</body>

</html>

用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部,内容区域,还有底部,一般都是使用三个div,然后id分别设置为header,content,footer,然后在定义每个div的高度,一般来说,header,footer都是公共的,因为高度,内容一般都是固定的,底部的区域,举个例子:

<html>

<head>

<style>

#header{

width:960px//通过id来控制

height:200px

}

@content{

width:960px//通过id来控制

height:auto //内容区域的高度一般都是auto的

}

#footer{

width:960px//通过id来控制

height:200px

}

</style>

</head>

<body>

<div id='header'>

<p>我是头部区域</p>

</div>

<div id='content'>

<p>我是内容区域</p>

</div>

<div id='footer'>

<p>我是低部区域</p>

</div>

</body>

</html>