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>