读书人

关于DIV布局的简单有关问题求解

发布时间: 2013-03-16 11:51:46 作者: rapoo

关于DIV布局的简单问题求解
有两个Div,其中一个的Css设置了float : left,另一个则在右边占满其它位置。现在有一个问题,就是右边高度并不固定,有时候高度比左边高,但有时候又有可能比左边低(视div里面的内容而定)。请问有什么办法,使得两个Div的高度以最大的一方为准?

关于DIV布局的简单有关问题求解
[解决办法]
办法是有的,可以js来比较控制。

if (left > right){
right.style.height = left.height + 'px';
}else{
left.style.height = right.height + 'px';
}

left,right是左右div的id。

但这样控制,会有明显的缺点。就是有时候js加载比较慢,导致高的一边内容显示不全。

我个人觉得,还是自然一点好,把内容分配精确一点。就不要在意左右的高度差别了。

如果你觉得有一边太短,非常难看。你可以设置最小高度。

在css 中使用
min-height:xxpx;

这样比较合理一些




[解决办法]
左右两边都用margin限制
margin-top:0px;
margin-bottom:opx;
[解决办法]
jQuery应该不难的,这个是可以设置高度的,


<!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(true); // 获取匹配元素外部高度(默认包括 padding 和 border),如果为 true,则包含 margin。
} else {
alert('对象不存在!');
}
}
/**
* 自动高度函数
* @param minHeight 最小值
*/
function autoHeight(minHeight){
var leftHeight = getHeight('leftNav'),
rightHeight = getHeight('rightMain'),
maxHeight,
lastHeight;
minHeight = minHeight
[解决办法]
Math.max(leftHeight, rightHeight);
$('#leftNav,#rightMain').height(minHeight); // 设置高度
}
// autoHeight(500); // 这个高度是可以设置的
autoHeight();
</script>
</body>
</html>


[解决办法]
如果只要求用CSS,有一个办法:

1.给这两个DIV都应用下面的样式:

margin-bottom:-9999px; padding-bottom:9999px;

2.给这两个div添加一个共同的父容器div,再给这个父容器添加如下的样式:

overflow:hidden;

但这个方法并不完美,不知道能不能达到你的要求?
[解决办法]
可以简单点 比如 左右之后 一边一个 td 。td 能 同高。

读书人网 >CSS

热点推荐