div层高度设置的问题!!

KeenWon 2011-03-26 09:21:57

我想实现这样的功能

<div id="all">

<div id="left" style="width:20%;float:left;">
</div>

<div id="right style="width:80%;float:left;">
</div>

</div>
我想实现这样的功能:
left和right套在all里面,一个在左一个在右
right的高度根据内容变化,高度不确定
那么
怎么让left和right变的一样高,right多长left就多长???????谢谢各位

...全文

128 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

renye0907 2011-03-29

打赏
举报



#main{width: 960px;height: auto;margin: 0 auto;border-left: 1px solid #BEBEBE;border-right: 1px solid #BEBEBE;overflow:hidden;}

#left{width: 180px;height: auto;border-right: 1px solid #BEBEBE;float: left;padding-bottom: 1000px;margin-bottom: -1000px;}

#right{width: 770px;height: auto;float: right;border-left: 1px solid #BEBEBE;padding-bottom: 1000px;margin-bottom: -1000px;}

最主要的CSS就是在LEFT和RIGHT二个DIV设置好padding-bottom: 1000px;margin-bottom: -1000px

KK3K2005 2011-03-27

打赏
举报

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />



<title>kk</title>

</head>

<body>







<div style='border:solid 1px red;overflow:hidden'>

		<div style='float:right;background-color:#000;color:#fff;width:49%;'>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/>右边<br/></div>

		<div style='float:left;background-color:#810;color:#fff;width:49%;padding-bottom:10000px;margin-bottom:-10000px;'>左边<br/>左边<br/>左边<br/>左边<br/>左边<br/>左边<br/></div>



</div>



</body>

</html>

乌镇程序员 2011-03-27

打赏
举报

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#left { background-color:#CCC;}

#right { background-color:#FFC; }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready( function() {

    var rightHeight = $("#right").css("height");

    $("#left").css("height",rightHeight);

});

</script>

</head>



<body>

<div id="all">

	<div id="left" style="width:20%; float:left;"></div>

	<div id="right" style="width:80%; float:left;"><p> </p><p> </p><p> </p></div>

	<br style="clear:both;" />

</div>



</body>

</html>