左侧容器高度随着右侧容器的高度改变而改变
2016-02-27 15:11
381 查看
<!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>MJBlog(mj.588cy.com)</title> <style type="text/css"> * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} .clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;} .box{ width:960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;} .left{ width:160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;} .left_wu{ width:160px; height:100%; background-color:#fafafa; float:left;} .left h1,.left_wu h1{ width:160px; height:30px; background-color:#67a727; text-align:center; line-height:30px; color:#FFFFFF; font-size:14px; margin-top:30px;} .nav{ width:160px; height:auto; margin:12px 0px;} .nav a{ width:160px; height:30px; line-height:30px; text-align:center; display:block; color:#588c0e;} .nav a:hover{ background-color:#ebebeb;} .nav .a_dq{ color:#333333; background-color:#ebebeb; font-weight:bold;} .right{ width:800px; height:auto; float:right;} .right h1{ width:800px; height:500px; text-align:center; line-height:100px; font-size:14px; font-weight:100;} </style> </head> <body> <div class="box"> <div class="right"> <h1>这个是有使用position绝对定位属性,所以左边的导航栏高度会随着父容器高度而变化</h1> </div> <div class="clear"></div> <div class="left"> <h1>个人资料</h1> <div class="nav"> <a href="#" class="a_dq">基本信息</a> <a href="#">修改头像</a> <a href="#">帐号绑定</a> <a href="#">个性签名</a> </div> </div> </div> <div class="box"> <div class="left_wu"> <h1>个人资料</h1> <div class="nav"> <a href="#" class="a_dq">基本信息</a> <a href="#">修改头像</a> <a href="#">帐号绑定</a> <a href="#">个性签名</a> </div> </div> <div class="right"> <h1>这个是没有使用position绝对定位属性,所以左边的导航栏高度没有随着父容器高度而变化,视觉效果就会差点</h1> </div> <div class="clear"></div> </div> </body> </html>
本方法主要的精髓在于父容器设置position:relative 左侧子容器设置absolute height:100%,这样就可以在父容器高度自适应的同时,左侧容器的高度也能随之改变,适用于左侧导航,右侧为内容区 的情况。
相关文章推荐
- CodeForces - 280D k-Maximum Subsequence Sum 线段树模拟费用流操作
- listview单个刷新item
- moveZeroes--JavaScript
- SpringMVC实现poi 解析excel 导入导出
- log4j【8】(slf4j)
- adb断开解决方法
- 如何配置JAVA的环境变量、Tomcat环境变量
- UVA294DIvisors(唯一分解定理+约数个数)
- java,冒泡排序法,网上查阅
- MySQL数据库基准压力测试工具之MySQLSlap使用实例
- sql行转列
- yii 下存放phpMyAdmin时,登录显示错误问题
- 基于 iOS SQLite 增删改查基本方法的封装---通用式数据库访问类
- java enum枚举的使用
- 1周《机电传动控制》学习笔记
- RNN 入门教程 Part 1 – RNN 简介
- iOS+PHP 注册登录系统(二) iOS部分
- 索引的使用及注意事项
- Android数据通信——JSON&Gson(Android studio)
- Codeforces 551C GukiZ hates Boxes 二分答案