js控制两个元素高度保持一致

ProsperLee

发布于 2018-10-24 10:45:49

1.7K0

发布于 2018-10-24 10:45:49

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-07-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java