HTML5怎么把导航固定在底部？是只滑动内容，导航固定不动的。

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5怎么把导航固定在底部？是只滑动内容，导航固定不动的。相关的知识，希望对你有一定的参考价值。

html5怎么把导航固定在底部的步骤如下：

css的定位样式属性来实现；会用到css中的position：fixed;属性，结合来实现。

拓展资料

css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：

1、边框特性

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。

2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。

参考技术A <!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>

本回答被提问者和网友采纳参考技术B

定位方法设置为fixed:

divposition:fixed;bottom:0px;

参考技术C <!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> 参考技术D 这个问题就知道基础最基本的没认真学 css中 top/botton fix.......

页面布局

一、页面布局目标效果：

1、页面构成：

顶部导航
banner
左侧导航
主要内容区（消息区/中间二级导航+内容区）
底部信息

2、顶部导航：

始终固定在窗体顶部，不随滚动条滚动

3、banner

多张图片循环滚动
滚动间隔5s

4、左侧导航

固定宽度260

5、主要内容区

固定宽度：1280-260-24（间隔）

6、核心区：左侧导航+主要内容区

总宽度1280px
居中：左右留白随分辨率增大

消息区

7、底部

不满一屏时在窗体底部

技术分享图片

二、核心代码

html

<div class="layout-div">
    <ul class="top-nav"></ul>
    <banner class="banner"></banner>
    <div class="content">
      <div class="aside"><ul class="aside-nav"></ul></div>
      <div class="main"><router-view></router-view></div>
   </div>
  <div class="foot">
    <footer>
        <div class="footer-center"></div>
    </footer>
  </div>
</div>

1、顶部导航

ul.top-nav {
  position: fixed; /*固定定位*/
  top: 0px; /*顶部位置为0*/
  width: 100%;
  /*上下左右间距为0*/
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  text-align: center; /*顶部菜单内部内容居中*/
  z-index: 100; /*浮在最上层，避免banner遮挡*/
}

2、banner

.banner {
  margin-top: 67px; /*顶部导航预，不重叠*/
  height: 326px;
  width: 100%;
}

3、核心区：左侧导航+主要内容区

.content {
  width: 1280px; /*固定宽度，居中，分辨率变大时两侧留白变大*/
  margin-left: auto;
  margin-right: auto;
}

4、左侧导航

.aside {
  float: left; /*靠左*/
  max-height: 100%;
  overflow: auto; /*长度超出加滚动条*/
}
ul.aside-nav {
  width: 260px; /*固定宽度*/
}

5、主要内容区

.main {
  margin-left: 284px; /*左侧导航260px+间距24px*/
}

6、底部

.layout-div { /*整个页面，position*/
  position: relative;
  min-height: 100%; /*内容不够一屏时，长度取一屏*/
  padding-bottom: 80px; /*为底部内容预留位置*/
}
.foot {
  width: 100%;
  position: absolute; /*layout-div为参照*/
  bottom: 0px; /*绝对位置，底部0，使用layout-div的padding-bottom*/
}
footer {
  height: 54px;
  width: 100%;
  color: #D5E0F3;
  background-color: #252A35;
  padding: 13px 0 13px 0;
}
.footer-center {
  position: relative;
  width: 800px; /*内容居中*/
  margin-right: auto;
  margin-left: auto;
}

以上是关于HTML5怎么把导航固定在底部？是只滑动内容，导航固定不动的。的主要内容，如果未能解决你的问题，请参考以下文章

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5如何才能让导航栏固定顶部不动，且！且！且！不遮挡住下面的DIV？？？

面板应该从底部向上滑动并将内容向上推，没有覆盖

怎么设置滑动返回键

移动端底部导航栏固定——兼容IOS

iPhone界面为啥会覆盖