欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

行使CSS让DIV牢靠位置

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

本文将报告怎样行使CSS让DIV牢靠在页面的左侧,而页面右侧内容转动时,左侧位置不随页面转动。这种结果在许多处所获得应用。

起首我们来看一段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

本文地址:http://itbyc.com/web/css3/13396.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1