檬味博客 » 问答 » css如何将导航绝对定位到页面底部

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

能用到的css样式：position:absolute;position:fiexd; 导航导航导航导航导航导航 css:.navdown{position:absolute:bottom:0;} .navdown{position:fiexd;bottom:0}
css如何将导航绝对定位到页面底部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航定位</title>
<style type="text/css">
<!--
body{margin:0 auto;padding:0;}
.box{width:1000px;margin:0 auto; position:relative;}
.nav_list{width:1000px;height:30px;background:#FF6600;position:absolute; bottom:-40px;}
.main{width:100%;height:800px;background:#D1D1D1;}
-->
</style>
</head>
<body>
<div class="box">
<div class="nav_list"></div>
<div class="main"></div>
</div>
</body>
</html>
<!--给最外层的box相对定位（不影响其他的层布局），给导航列表nav_list据对定位到底部，因为box是它的父层，所以定位的时候bottom:-40px;是根据box的最底部开始-->

<!--如果不给box以相对定位，那么导航列表使用据对定位的时候，bottom:-40px;他会以当前显示器分辨率的第一屏底部为准。-->2011-06-13
有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；
能用到的css样式：position:absolute;position:fiexd;
<div class="navdown" style="width:1000px;height:50px;">
<li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li>
</div>
css:
.navdown{position:absolute:bottom:0;}
.navdown{position:fiexd;bottom:0}2015-09-21
position:absolute;bottom:0;
如果这个不行那就不用再想了，已经不是CSS可以解决的了..2011-06-15
用position:fixed;来解决。
不过IE6不兼容。2011-06-13
修改div的height2011-06-13
mengvlog 阅读 41 次 更新于 2025-09-07 03:41:54 我来答关注问题0
5 个回答檬味博客专题活动
  • likely_01 css如何将导航绝对定位到页面底部

    能用到的css样式：position:absolute;position:fiexd; 导航导航导航导航导航导航 css:.navdown{position:absolute:bottom:0;} .navdown{position:fiexd;bottom:0}

  • 翡希信息咨询 详解CSS的相对定位和绝对定位

    当给第二个块元素设置position: absolute; left: 150px; top: 40px;后，它从文档流中移除，并相对于最近的已定位祖先元素（在此例中为body，因为没有设置定位的祖先元素）进行定位。三、实际应用 绝对定位在实际开发中有着广泛的应用，例如实现悬浮按钮、弹出层、导航栏等。通过结合相对定位和绝对定位...

  • 阿暄生活 position:fixed

    sticky：粘性定位，元素根据用户的滚动位置进行切换，在relative和fixed定位之间切换。实际应用：fixed定位常用于创建固定在页面顶部或侧边的导航栏、广告栏等。通过调整top、left等属性值，可以精确控制元素在浏览器窗口中的位置。综上所述，position:fixed是CSS中一个非常有用的定位属性，能够方便地创建固定...

  • 阿暄生活 DW导航栏怎么设置

    CSS代码： .nav{ position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */ width:100%; /* 宽度设置为100% */ height:40px; /* 高度 */ z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就...

  • 直到遇见你天蝎 如何让CSS导航固定在页面顶端。

    （1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部