首页 > 代码库 > 网页html结构右侧栏固定，左侧自适应大小。
网页html结构右侧栏固定，左侧自适应大小。
最近写了一个项目，写页面的结构，html树形结构是有header，container，footer部分，其中container部分是右侧栏是固定宽度，左侧是自适应宽度与屏幕高度。
第一次写的博客文章是container部分是左侧栏固定，右侧是自适应效果。左侧栏固定是很好写，但右侧栏固定却不很好写，以下是基本的结构与样式。
<div class="container" style="overflow:hidden;"> <div class="left leftCont"> </div> <div class="right rightSide"> </div></div
1.左右栏高度一定， 如果仍想按照左侧固定的模式写右侧固定的效果。可以如下写：
可以看到container下的两个div进行了对调。
<style type="text/css"> .rightSide { width: 200px; height: 600px; background: red; float: right; } .leftCont { width: 100%; margin-right: 200px; background-color: blue; height: 600px; } </style></head><body> <div class="container" style="overflow:hidden;"> <div class="rightSide"> </div> <div class="leftCont"> </div> </div></body>
2.如果不想将两个子div进行调换位置，则可以写如下代码，
<style type="text/css"> .rightSide { width: 200px; height: 600px; background: red; float: right; } .leftCont { float: left; width: 100%; margin-right: 200px; background-color: blue; margin-bottom: -2000px; padding-bottom: 2000px; } </style></head><body> <div class="container" style="overflow:hidden;"> <div class="left leftCont"> </div> <div class="right rightSide"> </div> </div></body>
这样界面实现效果，并且左侧的高度大小跟右侧div的高度一样。 其中关键的两句话是：margin-buttom：-2000px; padding-buttom：2000px; 并且3000px不是固定的值，只要是比实际需求的高度大就ok。
网页html结构右侧栏固定，左侧自适应大小。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。