懒人之家--可能是JS网页特效代码收集最全的懒站!

懒人原生固定侧栏宽度自适应全屏页面布局

作者/代码整理:懒人  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2016-02-19

效果描述:
有一段时间没有亲自写一些小效果了
今天终于能从工作中轻松下,突然不知道还有哪些没写的
想了半天,还是写个常见的一种布局的方式吧
我们经常能看到一些网站的后台管理系统,左侧竖导航往往都是一个固定的大小,右侧是一个自适应的div,无论你的浏览器多宽,右侧部分使用可以撑满剩下部分。记得09年之前,很多都是用一个大的table来实现,其实不然,简单的CSS也是可以实现的。今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等
使用方法:
1、引入head部分的CSS代码
2、将body中的代码部分拷贝到你需要的地方