css如何将导航绝对定位到页面底部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何将导航绝对定位到页面底部相关的知识，希望对你有一定的参考价值。
问题的前提是html不能修改，只能通过css调节，原来导航是在页面顶部的，现在要改到底部，绝对定位只能大体定位到某个高度，但是进入内页因为页面内容长度不一致，没法控制
有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；能用到的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:
.navdownposition:absolute:bottom:0;
.navdownposition:fiexd;bottom:0 参考技术A <!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">
<!--
bodymargin:0 auto;padding:0;
.boxwidth:1000px;margin:0 auto; position:relative;
.nav_listwidth:1000px;height:30px;background:#FF6600;position:absolute; bottom:-40px;
.mainwidth: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;他会以当前显示器分辨率的第一屏底部为准。-->本回答被提问者采纳 参考技术B position:absolute;bottom:0;
如果这个不行那就不用再想了，已经不是CSS可以解决的了.. 参考技术C 用position:fixed;来解决。
不过IE6不兼容。 参考技术D 修改div的height
css底部通栏设计（效果如图） 怎么做，绝对定位的话，子页面无法实现，求指教 ，要有例子可以发一个
现在我的布局是
<div id="topbg"> 100%
<div id="contaner"> 980px
<div id="top"></div>
<div id="main"></div>
<div id="footer"></div> 100%只能是980px
</div>
<div id="footer"></div> /* 如果放这，又不好定位，求解决办法
</div>
<div>横幅</div>
<div>内容</div>
<div>底部横幅</div>
==底部横幅是嵌套的，外层：宽100%，居中，背景横向平铺；内层：宽980，高度固定
其实，这个顶部横幅也是嵌套的，不然没效果
100%宽度的意义是使页面适应所有浏览器的宽度，很重要 参考技术B 您好，这个不需要绝对定位，
1，布局如下
<div id="foot">
<div id="foot_980"></div>
</div>
2，css如下
#foot width:100%; height:高度/*如果有背景图片的话。截取两像素，背景图片平铺就可以了*/
#foot_980 width:980px; height:高度/*这里的宽度是网页主宽度，一般960,980都有，根据设计图，有背景的话，平铺背景就可以了*/
希望可以帮到你 参考技术C <div id="footer">
<div class="footer_wrap">
这里是底部内容
</div>
</div>
<style type="text/css">
#footer width:100%; height:139px;
.footer_wrap width:1000px; margin-left:auto; margin-right:auto;
</style>
这样一来，#footer是100%的宽度，平铺顶部背景图片就可以了。.footer_wrap 则是文字的宽度，按照正常的方式布局就可以了。追问
现在我的布局是
100%
980px
100%只能是980px
/* 如果放这，又不好定位，求解决办法
给你推荐一个结构
/* 这里可以随时调整宽度，一般可以100%，这样方便进行头部背景添加 */
/* 这里就是文字页面的宽度，例如1000px */
头部信息
主要信息
底部信息
这样随便哪个版块都可以轻松添加背景了，只要.footer_wrap左右居中就可以了
<div id="footer" style="position: fixed; bottom: 0px; height: 80px;"></div>就可以了
不过需要注意它必须被指定高度，不然它和contaner会冲突。 第5个回答 2013-03-12 <div id="footer"><!-- 背景放这里100% -->
<div id="foot_in">980px居中</div><!-- 文字放这里 -->
</div>
以上是关于css如何将导航绝对定位到页面底部的主要内容，如果未能解决你的问题，请参考以下文章
Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题