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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 0:55:56 共计：3600 浏览

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

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

方法：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>

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

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS 元素垂直居中的 6种方法_CSS学习 | ·下一条：CSS：左侧栏固定宽度，右侧栏自适应宽度_CSS学习