网页中三列自适应高度布局的实现

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:15:03

Step 4: 给右栏定位

　　将右栏定位于#container的右内补丁位置，只要设定右栏的负右边界就可。

以下是引用片段：
　　#right {
　　width: 150px; /* RC width */
　　margin-right: -150px; /* RC width */
　　}

　　现在布局中的空白区域已消失。

　　 Step 4: Pull the right column into place

Step 5:最后的完善

　　至此，布局已基本完成，但如果浏览器的最小尺寸比中心宽度小，那么左列将变的很小，所以要设定个最小宽度，可惜IE现在还不支持。800x600没问题

以下是引用片段：
　　body {
　　min-width: 550px; /* 2x LC width + RC width */
　　}

　　第四步完成的代码在IE里左栏会消失，现在要做的是把左栏定到它正确的位置上去。

以下是引用片段：
　　* html #left {
　　left: 150px; /* RC width */
　　}

　　内容的边距

　　我们需要给内容一个内补丁(10PX)，否则的话，文本都顶着边。

　　列的总宽度等于(padding+width)。

以下是引用片段：
　　#left {
　　width: 180px; /* LC fullwidth - padding */
　　padding: 0 10px;
　　right: 200px; /* LC fullwidth */
　　margin-left: -100%;
　　}

我来说两句：