1 <script type="text/javascript"> 2 $(function(){ 3 if($("#left").height() > $("#right").height()){ 4 $("#right").css("height",$("#left").height()); 5 }else{ 6 $("#left").css("height",$("#right").height()); 7 } 8 }) 9 </script>
下面是解决侧边导航栏与主内容区的高度视觉上相同的解决方法。(修改背景颜色)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>左边导航栏与右边内容区高度保持一致的视觉解决方案</title> 8 </head> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 /* 全部 */ 15 body{ 16 background-color: #ccc; /* 整体背景颜色 */ 17 } 18 /* 头部 */ 19 header{ 20 padding: 10px 260px; 21 background-color: #fff; 22 border-bottom: 5px solid #ff00ff; 23 } 24 /* 主要部分 */ 25 #main{ 26 width: 1200px; 27 margin: 40px auto 40px; 28 background-color: #fff; /* 主体部分为白色 */ 29 } 30 #main #aside{ /* 侧边栏 */ 31 float: left; 32 width: 246px; 33 height: 200px; /* 侧边栏高度与右边实际高度不同 */ 34 background-color: #fff; /* 背景颜色 与主要部分相同*/ 35 border-bottom: 1px solid #000; /* 方便区分 */ 36 } 37 #main #right{ /* 右边内容区 */ 38 background-color: #ccc; /* 设置背景与整体部分相同 */ 39 width: 944px; 40 margin-left: 246px; /* 为侧边栏宽度 */ 41 padding-left: 10px; /* 分割侧边栏与内容区 */ 42 } 43 #right-main { 44 width: 100%; 45 height: 600px; /* 实际高度用元素来拉伸 */ 46 min-height: 200px; /*让他的最小高度为侧边栏高度 保持高度一致*/ 47 background-color: #fff; /* 内容去主要部分与侧边栏颜色一致 */ 48 } 49 /* 底部 */ 50 footer{ 51 width: 1200px; 52 margin: 0 auto; 53 padding: 20px 0; 54 } 55 </style> 56 <body> 57 <!-- 头部 --> 58 <header> 59 <h1>我来组成头部</h1> 60 </header> 61 <!-- 主体 --> 62 <div id="main"> 63 <!-- 侧边栏 --> 64 <div id="aside"></div> 65 <!-- 右侧 --> 66 <div id="right"><!-- 背景为整体颜色 --> 67 <!-- 主要内容 --> 68 <div id="right-main"></div> 69 </div> 70 </div> 71 <!-- 底部 --> 72 <footer> 73 <p>Posted by: ProsperLee</p> 74 <p>Person Website: <a href="http://www.cnblogs.com/lprosper/">H5江湖上的小白,一个孤独的侠!</a>.</p> 75 </footer> 76 </body> 77 </html>
留下你的足迹求推荐呦