CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致
2017-01-09 05:42
609 查看
纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助实现。
关于div自适应高度/左右高度自适应一致的js代码
//.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;} //.right{ width:800px; height:auto; float:right;} <!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>
关于div自适应高度/左右高度自适应一致的js代码
$(function(){ var heightLeft= $("#Left").height(); var heightRight= $("#Right").height(); if (heightLeft > heightRight) { $("#Right").height(heightLeft); } else { $("#Left").height(heightRight); } })
相关文章推荐
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- [CSS]使用绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化
- 通过JS控制CSS实现连帧动画
- 奇怪的问题,关于js+css实现页面内容高度自适应的两种解决方案
- JS+CSS带数字和左右按钮可控制切换的图片幻灯
- JS控制DIV的高度一致
- Js + Css的msn式的popup提示窗口的实现 (转自:月牙儿)
- Js + Css的msn式的popup提示窗口的实现
- div+css 左右两列高度自适应以及父级div也跟着自适应子级的高度
- div如何实现左右两个panel并排,而且高度一致
- CSS控制div自动延伸到窗口100%高度
- js控制三列高度自适应DIV+CSS页面
- JS控制DIV的高度一致
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
- Js + Css的msn式的popup提示窗口的实现
- Js + Css的msn式的popup提示窗口的实现
- js控制三列高度自适应DIV+CSS页面
- css控制背景图左右对齐 实现鼠标移入移出效果
- Js + Css的msn式的popup提示窗口的实现 (转自:月牙儿)
- 通过JS控制CSS实现连帧动画