使用CSS让DIV固定位置
2011-01-05 13:01
711 查看
本文将讲述如何使用CSS让DIV固定在页面的左侧,而页面右侧内容滚动时,左侧位置不随页面滚动。这种效果在很多地方得到应用。
查看演示
首先我们来看一段XHTML代码。
页面由左侧菜单和右侧主体内容构成,右侧内容可能会很多,会出现翻屏。现在是要无论页面怎么翻屏滚动,左侧的菜单始终在左侧。请看CSS解决方案。
我设置左侧div#site_nav的样式,将其位置固定,即position:fixed,并且设置固定宽度,高度为100%,为了区分右侧内容,我设置了背景颜色background:#ffc。
接着,我将内容部分div#content设置其padding值,注意关键是padding-left:190px,只有大于左侧菜单宽度的padding值,才能使右侧主体内容部分不会与左侧菜单重叠。请看演示DEMO
查看演示
首先我们来看一段XHTML代码。
<div id="site_nav"> <h3>歌手库</h3> <ul> <li><a href="#">华语</a> <ul> <li><a href="#">女歌手</a></li> <li><a href="#">男歌手</a></li> <li><a href="#">乐队组合</a></li> </ul> </li> <li><a href="#">欧美</a></li> <li><a href="#">日韩</a></li> <li><a href="#">其他</a></li> </ul> </div> <div id="content"> 右侧主体内容 </div>
页面由左侧菜单和右侧主体内容构成,右侧内容可能会很多,会出现翻屏。现在是要无论页面怎么翻屏滚动,左侧的菜单始终在左侧。请看CSS解决方案。
#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%; background:#ffc; overflow-y:auto;} #content{padding:10px 10px 10px 190px;}
我设置左侧div#site_nav的样式,将其位置固定,即position:fixed,并且设置固定宽度,高度为100%,为了区分右侧内容,我设置了背景颜色background:#ffc。
接着,我将内容部分div#content设置其padding值,注意关键是padding-left:190px,只有大于左侧菜单宽度的padding值,才能使右侧主体内容部分不会与左侧菜单重叠。请看演示DEMO
相关文章推荐
- 固定位置浮动 DIV 不抖动 IE6 IE7 CSS 写法
- CSS+jquery 实现滑动下拉框 DIV相对于浏览器固定位置
- div+css中如何将层随着滚动条的移动的初始位置固定在导航栏左下方
- html css 控制div或者table等固定在指定位置
- Css如何定位网站的footer在固定位置(用DIV+CSS让footer始终在底部)
- CSS+DIV固定位置,不随滚动条而滚动
- 通过css/js来固定div的位置
- DIV始终固定在网页右下角位置的CSS实现方法,返回顶部功能
- 固定位置浮动 DIV 不抖动 IE6 IE7 CSS 写法
- 利用CSS实现DIV在浏览器中位置相对固定,而且IE6下滚动不闪
- 基于CSS的DIV网页设计 - 使用固定层方法设计网页
- DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
- Css固定元素位置(不随着窗口大小位置改变)
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 转贴:JavaScript:使用JS和CSS构造圆角DIV广告框技术解析
- css 使用 calc 实现背景满屏,内容宽度固定
- css中div高度自适应且固定剩余高度由另外div内容填充
- css的div垂直居中的方法,百分比div垂直居中 2014年11月16日 19922次浏览 前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的d
- css中absolute使用,用position和transform是div里面的div垂直居中
- 让一个div始终固定在页面的某一固定位置的方法