左边固定不动宽度,右边自融入宽度的CSS合理布

2021-01-20 14:33 jianzhan
第1种方式:
有关这个合理布局,作者是这样表明的:“left和right都贴住左边。设定left在right上面(z-index);在right内加个放內容的层(content);设定content间距right的左边为200px,即正巧等于left的宽度。”
这个合理布局有1个缺陷便是,假如我设定了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=gb2312" />
<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>