左侧固定宽度，右侧自适应宽度的CSS布局（总结）

这个是我练习做网页查资料查到的，有很多不错的布局。将其总结，并写上自己使用的一些感悟。

第一种方法：

关于这个布局，作者是这样说明的：“left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。”

这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道解决方法，望留言解答。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
* {margin:0; padding:0; list-style:none; } 
.header{ width:100%;height:250px;background-color:#33FF00;}
.logo{width:100%;height:200px;background-color:#330000;}
.nav{width:100%;height:50px;background-color:#660000;}
.wrapper {width: 100%; } 
.left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;} 
.right {width:100%; height:400px;background:#ccc; position:absolute; left:0;} 
.content {height:400px;margin-left:200px; background:#ffc; } 
.foot { position:absolute;height:100px;background-color:#000000;bottom:0;}
.foot h1, .foot p{color:#FFFFFF;}
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header">
        <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="left">
        <h1>Left</h1>
        <p>左侧固定宽度200px</p>
    </div> 
    <div class="right"> 
        <div class="content">
            <h1>Content</h1>
            <p>右侧宽度自动适应</p>
        </div>
    </div>
    <div class="foot">
        <h1>Foot</h1>
        <p>想看看他的位置会在哪？</p>
    </div>  
</div> 
</body> 
</html>

第二种解决方法

（未完，待续）

来源：https://www.cnblogs.com/kangnixi/archive/2010/02/22/1671593.html

标签

自适应

content