左边固定,右边自适应布局
方法一:
<style> #aside { float: left; width: 200px; background-color: red; } #content { margin-left: 200px; background-color: blue; } </style> <div id="aside"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div>
方法二:
<style> #wrap { overflow: hidden; *zoom: 1; } #content, #sidebar { background-color: #eee; } #sidebar { float: right; width: 300px; } #content { margin-right: 310px; } #footer { background-color: #f00; color: #fff; margin-top: 1em } </style> <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div> </div> <div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>