css如何将导航绝对定位到页面底部

html-css08

css如何将导航绝对定位到页面底部,第1张

有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；

能用到的css样式：position:absoluteposition:fiexd

<div class="navdown" style="width:1000pxheight:50px">

<li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li>

</div>

css:

.navdown{position:absolute:bottom:0}

.navdown{position:fiexdbottom:0}

用简单的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>