css如何将导航绝对定位到页面底部
问题的前提是html不能修改，只能通过css调节，原来导航是在页面顶部的，现在要改到底部，绝对定位只能大体定位到某个高度，但是进入内页因为页面内容长度不一致，没法控制...
问题的前提是html不能修改，只能通过css调节，原来导航是在页面顶部的，现在要改到底部，绝对定位只能大体定位到某个高度，但是进入内页因为页面内容长度不一致，没法控制
展开
5个回答
展开全部
有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；
能用到的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}
能用到的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}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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;他会以当前显示器分辨率的第一屏底部为准。-->
<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;他会以当前显示器分辨率的第一屏底部为准。-->
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
position:absolute;bottom:0;
如果这个不行那就不用再想了，已经不是CSS可以解决的了..
如果这个不行那就不用再想了，已经不是CSS可以解决的了..
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用position:fixed;来解决。
不过IE6不兼容。
不过IE6不兼容。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
修改div的height
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
