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 阅读 13 次 更新于 2025-07-21 07:58:43 我来答关注问题0
  • 能用到的css样式:position:absolute;position:fiexd; 导航导航导航导航导航导航 css:.navdown{position:absolute:bottom:0;} .navdown{position:fiexd;bottom:0}

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

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

  •  阿暄生活 position:fixed

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

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

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

    CSS中的相对定位和绝对定位详解如下:一、相对定位 定义:相对定位允许元素相对于自身在文档流中的原始位置进行偏移。 特点: 元素移动后,其原始位置依旧占据在文档流中,不会干扰其他元素的位置。 使用 left、right、top、bottom 属性来调整元素的偏移量。 例如,left: 50px; top: 30px; ...

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

CSS相关话题

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