我想知道是否有任何简单的例子可以做到以下几点
* 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,或者它们只是不支持填充.
提前致谢
我知道这样做是不对的,而且我是一个彻头彻尾的语义编码器(这并不意味着押韵),但我仍然使用单个布局表来做列.
为什么？它具有互操作性和简单性.它不需要荒谬的CSS黑客只是勉强把东西放在一起(严重的是,花车是用于排版,而不是布局).它在当前使用的每个浏览器中显示相同.它.只是.作品.这是一个语义黑客,但有时你只需要做你必须做的事情.
然而,地平线上有光明.CSS的table-*显示值使得等高列变得微不足道,但它们仍然可以违反源顺序(您仍然需要最左边的列位于中心列之前,即使它是导航部分也应该接近结尾)您的页面代码).IE8和所有非IE浏览器都支持这些.
CSS3网格和CSS3模板布局都将正确解决这个问题,但它们仍然有点远离可用.但是,编码员可以做梦吗？
您在alistapart.com中找到的示例非常复杂,您可以找到关于这些布局的每个重要示例都支持填充.你会在互联网上找到(并且已经找到)很多关于它的好例子,花一些时间试图理解它们,你会发现它们最终并不那么复杂.
无论如何,我有一个很好的演示布局,类似于你想要的第二个,在这里:http: //www.meiaweb.com/test/BMS_DM_NI/
基本上,HTML是这样的:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
而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;
}
我认为这很简单,它适用于所有现代浏览器.