CSS: position实现左侧栏高度自适应,依右侧栏高度而定 - 等高布局

老白 6年前 2909浏览 0评论

等高布局相关:《padding和margin配合等高布局,侧边栏等高布局方法》而本文介绍的是使用position来实现多栏等高自适应布局


左侧栏自适应高度.png

直接上图,左侧菜单只是显示部分,右侧的高度随时可能变化,要求:左侧栏的高度也跟随右侧栏一起变化!

方法:position:absolute; top:0; bottom:0;

使用position:absolute; 去定义顶部距离、底部距离,就可以让整个div的高度自适应了。

完整代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>左侧栏高度自适应</title>

<style type="text/css">

#wrap .wrap{ margin-top: 20px; margin-bottom: 20px; overflow: hidden; position: relative;}

.left_warp{width: 137px; float: left; border: 1px solid #ededed;  background-color: #fafafa;

 padding: 0 13px;font-size: 14px;

 bottom:0; overflow:auto;

 position:absolute; top:0; bottom:0; 

}

</style>

</head>

 

<body>

<div class="wrap">

 <div class="left_warp">

  <ul>

   <li><a href="#" class="on">个人主业</a></li>

   <li><a href="#">修改密码</a></li>

   <li><a href="#">PID密码</a></li>

   <li><a href="#">我的推广</a></li>

   <li><a href="#">我要放单</a></li>

   <li><a href="#">我的商品</a></li>

  </ul>

 </div>

 <div class="right_warp">

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

 </div>

  </div>

</body>

</html>

 

之前不知道如何写,是参考以下代码学习到的:

高度随浏览器大小而变化.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top,固定高度</div>
<div class="main">我是main,高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
</body>
</html>