圣杯布局(css)

圣杯布局

1. DOM结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面。

2. CSS代码

假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

.container {
  height: 200px;
  padding-left:200px ;
  padding-right: 150px;
}

为左右两列预留出相应的空间，得到如下示意图：