CSS实例：CSS实现的等高网页布局

以下是CSS实现的等高网页布局的完整攻略：

具体步骤

1.首先，在HTML中设置一个容器来承载所有的网页内容，这个容器可以是一个div标签，设置它的高度为auto，将内容容器的高度和宽度都设置为100%；

2.创建左边的导航栏容器，将其float属性设置为left，然后设置其宽度和内容容器的宽度相同，设为20%或其他值；

3.在右边的主容器中，设置两个div为同级元素，一个是左边容器的内容，另外一个是右边非内容容器，将其float属性设置为right，设置其宽度和左边的导航栏容器宽度相同，即80%，并设定margin-right的值为负数，让其位置靠拢；

4.将左边的导航栏及右边的两个容器高度都设为auto，这样它们的高度就会随着内容而自动适应；

5.最后，在CSS中，为左边的导航栏以及右边的两个容器，都设置一个具有清除浮动效果的伪元素，如：:after{ clear:both; content:''; display:block;}。

示例

以下是两个基于CSS等高网页布局的完整示例：

Example 1:

HTML代码：

<div class="container">
  <div class="nav">导航栏</div>
  <div class="content">主内容</div>
  <div class="extra">额外信息</div>
</div>

CSS代码：

.container{
  width: 100%;
  height: auto;
  min-height: 300px;
}
.nav{
  width: 20%;
  height: auto;
  float: left;
  background-color: #ccc;
  }
.content{
  width: 80%;
  height: auto;
  float:right;
  margin-right: -20%;
  background-color: #eee;
  }
.extra{
  clear: both;
  height: auto;
  background-color: #ffd;
  }
.nav:after, .content:after, .extra:after{
  clear: both;
  content: "";
  display: block;
  }

Example 2:

HTML代码：

<div class="container">
  <div class="left">左侧导航</div>
  <div class="right">
    <div class="header">头部</div>
    <div class="body">主体内容</div>
    <div class="footer">底部</div>
  </div>
</div>

CSS代码：

.container{
  width: 100%;
  height: auto;
  min-height: 300px;
}
.left{
  width: 20%;
  height: auto;
  float: left;
  background-color: #ccc;
  }
.right{
  width: 80%;
  height: auto;
  float:right;
  margin-right: -20%;
  background-color: #eee;
  }
.header{
  height: 50px;
  background-color: #f4f4f4;
  }
.body{
  height: auto;
  background-color: #fff;
  }
.footer{
  height: 50px;
  background-color: #f4f4f4;
  }
.left:after, .right:after, .header:after, .body:after, .footer:after{
  clear: both;
  content: "";
  display: block;
  }

以上就是实现CSS等高网页布局的详细攻略及示例，希望对您有所帮助！