控制左右两个模块的高度有关问题。
日期：2014-05-17 浏览次数：20777 次
控制左右两个模块的高度问题。。。
比如我有一个main,rightMain,leftNav3个div，leftNav和rightMain都是放在main里面的，由于leftNav和rightMain高度不确定，所以我是这么让leftNav和rightMain对齐的。。代码如下。。。可是不知道为什么有些页面左右2个div就是对齐的。。。有些页面左边会比右边高一点，有些页面右边会比左边高一点。。。这是怎么回事呢？求解决啊。。困扰了一个晚上了。。。。。
------解决方案--------------------
有这么两点建议：
1. 如果表现的话尽量用class，尽量让js与表现的样式不要混在一块。意思就是leftNav，即是js的勾子又是样式的id名。防止以后维护人员因为其它原因更改或删除这个名称。
2. 尽量采用js的内置方法，这样速度会快一点。试着用源生的js来实现，水平有限，先jq版本的看看吧。
3. minheight400 这个样式是最小高度css的实现。
比如我有一个main,rightMain,leftNav3个div，leftNav和rightMain都是放在main里面的，由于leftNav和rightMain高度不确定，所以我是这么让leftNav和rightMain对齐的。。代码如下。。。可是不知道为什么有些页面左右2个div就是对齐的。。。有些页面左边会比右边高一点，有些页面右边会比左边高一点。。。这是怎么回事呢？求解决啊。。困扰了一个晚上了。。。。。
- JScript code
$(function () {
var p = $("#rightMain").height();
var k = $("#leftNav").height();
var x = $("#main").height();
var c = $("#publishHeight").height();
if (p > k) {
$("#leftNav").height(p);
}
else {
$("#rightMain").height(k);
}
});
------解决方案--------------------
有这么两点建议：
1. 如果表现的话尽量用class，尽量让js与表现的样式不要混在一块。意思就是leftNav，即是js的勾子又是样式的id名。防止以后维护人员因为其它原因更改或删除这个名称。
2. 尽量采用js的内置方法，这样速度会快一点。试着用源生的js来实现，水平有限，先jq版本的看看吧。
3. minheight400 这个样式是最小高度css的实现。
- HTML code
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test-height</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#3f3f3f;font:12px/2 arial;}
ul,li{list-style-type:none;}
a{color:#24d;text-decoration:none;}
a:hover{color:#e40000;text-decoration:underline;}
a:focus{outline:0;}
.container{ width:1000px; margin:0 auto; background:#fff; overflow:hidden; padding:15px;}
.silder{ float:left; width:180px; padding:10px; border-right:1px solid #ccc; background:#efefef;}
.main{ float:right; width:760px; padding:10px; background:#c0d3e2;}
.minheight400{min-height:400px;height:auto !important;height:400px;overflow:visible;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main" class="container">
<div id="leftNav" class="silder">
<ul class="slide_menu">
<li><a href="#"><span></span>我的首页</a></li>
<li><a href="#"><span></span>我的博客</a></li>
<li><a href="#"><span></span>我的心情日记</a></li>
</ul>
</div>
<div id="rightMain" class="main">
<ul class="main_cont">
<li>我是首页内容</li>
<li style="display:none;">我的博客内容</li>
<li style="display:none;">我的心情日记内容</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 取得高度
function getHeight(o){
if($('#' + o).length > 0){ // 判断页面元素存在否
return $('#' + o).outerHeight(); // 获取匹配元素外部高度（默认包括 padding 和 border），如果为 true,则包含 margin。
} else {
return 0;
}
}
/**
* 自动高度函数
* @param minHeight 最小值
*/
function autoHeight(minHeight){
var leftHeight = getHeight('leftNav1'),
rightHeight = getHeight('rightMain1'),
maxHeight,
lastHeight;
if(leftHeight || rightHeight){ // 如果两个中有一个存在
maxHeight = Math.max(leftHeight, rightHeight); // 取两个中最大的一个
lastHeight = maxHeight < minHeight ? minHeight : maxHeight; // 设页面的最小值，
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
