如题所述
HTML5怎么把导航固定在底部的步骤如下：
css的定位样式属性来实现；会用到css中的position：fixed;属性，结合来实现。
<style>.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距离底部为0*/left:0;z-index:1;}</style><div class="foot-menu">
<!---导航具体内容-->
</div>
拓展资料
css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：
1、边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。
2、多背景图
CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2017-09-14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.content {
width:960px;
height:2024px;
border:1px solid #000;
margin:0 auto;
}
.nav {
width:100%;
height:30px;
margin:0 auto;
background:#f00;
position:fixed;
bottom:0;
text-align:center;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="nav">导航</div>
</body>
</html>本回答被提问者和网友采纳
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.content {
width:960px;
height:2024px;
border:1px solid #000;
margin:0 auto;
}
.nav {
width:100%;
height:30px;
margin:0 auto;
background:#f00;
position:fixed;
bottom:0;
text-align:center;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="nav">导航</div>
</body>
</html>本回答被提问者和网友采纳
第2个回答 2014-05-09
定位方法设置为fixed:
div{position:fixed;bottom:0px;}第3个回答 2018-01-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style type="text/css">
*{margin:0; padding:0; list-style:none;}
.content{ margin:0 auto; background: #pink;}
.clear{ clear:both; width: 100%; height: 0;}
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content:""; height: 0; clear: both;}
.middle{ overflow-x:hidden; overflow-y:auto;}
.middle p{ font-size: 30px; line-height: 100px; height: 100px;}
.head{ height: 60px; background: red;}
.head ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px;}
.foot{ height: 60px; background: orange;}
.foot ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px; color: #fff;}
</style>
<body>
<div class="content">
<div class="head">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
<div class="middle" style="height:1000px;">
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div class="foot">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
</div>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript">
$(function(){
autoSizeHeight();
window.onresize=function(){ //拖动浏览器窗口导航也适应
autoSizeHeight();
}
})
//固定导航
function autoSizeHeight(){
var footerH=0;
var winH=$(window).height();
footerH=$(".foot").outerHeight(true);
//滚动区域
if($(".middle").length !=0){
var headerH=$(".middle").position().top;
$(".middle").height(winH-footerH-headerH);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style type="text/css">
*{margin:0; padding:0; list-style:none;}
.content{ margin:0 auto; background: #pink;}
.clear{ clear:both; width: 100%; height: 0;}
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content:""; height: 0; clear: both;}
.middle{ overflow-x:hidden; overflow-y:auto;}
.middle p{ font-size: 30px; line-height: 100px; height: 100px;}
.head{ height: 60px; background: red;}
.head ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px;}
.foot{ height: 60px; background: orange;}
.foot ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px; color: #fff;}
</style>
<body>
<div class="content">
<div class="head">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
<div class="middle" style="height:1000px;">
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div class="foot">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
</div>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript">
$(function(){
autoSizeHeight();
window.onresize=function(){ //拖动浏览器窗口导航也适应
autoSizeHeight();
}
})
//固定导航
function autoSizeHeight(){
var footerH=0;
var winH=$(window).height();
footerH=$(".foot").outerHeight(true);
//滚动区域
if($(".middle").length !=0){
var headerH=$(".middle").position().top;
$(".middle").height(winH-footerH-headerH);
}
}
</script>
</body>
</html>
第4个回答 2014-05-10
这个问题 就知道基础 最基本的没认真学 css中 top/botton fix.......
