我想知道是否有任何简单的例子可以做到以下几点

    * A right and a left fixed column with a fluid center. 
      With full height and width and a header and footer.
    * A single left fixed column with a fluid content column 2. 
      With full height and width and a header and footer.
    * A single right fixed column with a fluid content column.
      With Full height and width and a header and footer.

我已经尝试了一些方法(例如listapart上列出的方法),但它们看起来非常复杂,并且它们使用了很多div,或者它们只是不支持填充.

提前致谢

查看此网站:

http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm

上面的其他布局示例:http:
//matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http ://matthewjamestaylor.com/blog/perfect-3-column.htm

我知道这样做是不对的,而且我是一个彻头彻尾的语义编码器(这并不意味着押韵),但我仍然使用单个布局表来做列.

为什么？它具有互操作性和简单性.它不需要荒谬的CSS黑客只是勉强把东西放在一起(严重的是,花车是用于排版,而不是布局).它在当前使用的每个浏览器中显示相同.它.只是.作品.这是一个语义黑客,但有时你只需要做你必须做的事情.

然而,地平线上有光明.CSS的table-*显示值使得等高列变得微不足道,但它们仍然可以违反源顺序(您仍然需要最左边的列位于中心列之前,即使它是导航部分也应该接近结尾)您的页面代码).IE8和所有非IE浏览器都支持这些.

CSS3网格和CSS3模板布局都将正确解决这个问题,但它们仍然有点远离可用.但是,编码员可以做梦吗？

您在alistapart.com中找到的示例非常复杂,您可以找到关于这些布局的每个重要示例都支持填充.你会在互联网上找到(并且已经找到)很多关于它的好例子,花一些时间试图理解它们,你会发现它们最终并不那么复杂.

无论如何,我有一个很好的演示布局,类似于你想要的第二个,在这里:http: //www.meiaweb.com/test/BMS_DM_NI/

基本上,HTML是这样的:

        

            
Title
        
        

            


               

            

            

                
Content Title
                

                   
                
            
        
    

而css是:

html {
    overflow: auto;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
}

#head {
    height: 20px;
    background-color: #666;
    color: #AAA;
    padding: 20px 20px;
}


#navigation {
    width: 210px;
    padding: 20px 20px;
    background: #efefef;
    border: none;
    border-right: solid 1px #AAA;
    float: left;
    overflow: auto;
}

#content {
    margin-left: 250px;
    padding: 20px 20px;
}

我认为这很简单,它适用于所有现代浏览器.