今天小编跟大家讲解下有关布局之左侧固定，右侧自适应 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关布局之左侧固定，右侧自适应 的相关资料，希望小伙伴们看了有所帮助。
1，固定侧左浮动，右侧设置margin给左边的固定宽度区left浮动并设置一个宽度，右边的自适应区right只设置margin值，假设right的宽度是100%，那么设置margin后，它得宽度就变为100%-margin；left发现自己的宽度可以和right挤在同一行，它就浮动上来了
<style>#main{ overflow:hidden; } #left{ float:left; width:300px; background:red; } #right{ margin-left:310px; background:#666; } #footer{ height:50px; background:#ccc; margin-top:10px; }</style><title>宽度自适应</title></head><body><div id="main"> <!--这种方法必须把固定宽度区写在前面，否则布局不了--> <div id="left"style="height:400px;">content我是固定宽度区</div> <div id="right"style="height:300px;">sider我是自适应区</div></div><div id="footer">footer</div>记得清除浮动，这样不管left和right谁更长，footer都不会错位，不会对布局造成影响；但是，这种方法必须让固定宽度区写在自适应区前面。
2,固定宽度区使用绝对定位，自适应区设置margin若想把自适应区right写在前面，给right设置margin值，需要给left固定宽度区设置绝对定位，在此之前把父元素main设置为相对定位relative，让left的绝对定位是相对于main而不是相对于整个网页。
<head> <meta http-equiv="Content-type"type="text/html; charset=utf-8"> <style type="text/css"> div{ margin:0; padding:0; } #main{ position:relative; } #left{ position:absolute; top:0; left:0; width:300px; background:red; } #right{ margin-left:310px; background:green; } #footer{ height:50px; background:#ccc; margin-top:10px; } </style> <title>宽度自适应</title></head><body> <div id="main"> <div id="right"style="height:300px;">right我是自适应区</div> <div id="left"style="height:400px;">left我是固定宽度区</div> </div> <div id="footer">footer</div></body>来源：爱蒂网
