faux列

Posted 2020-10-12 L_mj

在一个布局中，假设有导航元素和内容元素，切给他们都分别应用了背景，理想情况下，背景应该拉长到整个布局的最大高度，从而形成列的效果，但是实际上，因为导航元素没有扩展到最大高度，所以它们的背景不会拉长，如图所示，左边的导航的灰色背景的高度没有达到最大高度。

解决方法：为创建列的效果，需创建一个伪列，即在一个占据布局最大高度的元素上应用重复的背景效果——faux列。关键在于创建合适的背景图片。

固定宽度的布局

只需在容器元素上应用一个垂直重复的背景图像，其宽度与导航区域相同。为固定宽度的布局设计faux列是很容易的，因为知道列的尺寸和位置。

#wrapper{
    background: #fff url() repeat-y left top;
}

流式布局

流式布局有点复杂，因为列的尺寸和位置随着浏览器窗口缩放而变化，技巧是按百分比对背景图像进行定位。

• 使用像素设置背景的位置：图像的左上角会定位在距离元素左上角指定像素数的地方。
• 使用百分数定位：会对图像上的对应点进行定位，例如：将垂直和水平位置设置为20%，那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。

例如需要创建如下图的布局：左边导航为次内容区，占总内容区的25%，右边为主内容区，主内容区中左边为主内容区，占主内容区的72.82%，右边为次内容区。

简单代码如下：

<div class="wrapper">
   <div class="inner-wrapper">
    <div class="content">
        <div class="primary">
            <div class="primary">     </div>
            <div class="secondary">   </div>
        </div>
        <div class="secondary"> </div>
    </div>
  </div>
</div>
<style>
        .wrapper{
            width:76.8%;   /*960÷1250=76.8%*/
            margin:0 auto;
            text-align:left;
            min-width : 62em; /*比较小的窗口尺寸，布局太挤，所以添加以em为单位的min-width*/
            max-width : 125em; /*设置为em为单位的max-width是为了确保文本行的长度适合阅读*/
        }
        .content .primary{
            width : 72.82%;  /*670÷920=72.82% ，因为在wrapper设置了水平居中，所以40px均匀分布在content容器两侧各20px*/
            float:right;
            display:inline;
        }
        .content .secondary{
            width:25%;   /*230÷920=25%*/
            float:left;
            display:inline;
        }
        .content .primary .primary{
            width:59.7%;  /*400÷670=59.7%*/
            float:left;
            display:inline;
        }
        .content .primary .secondary{
            width:34.33%;   /*230÷670=34.33%*/
            padding-right:3%;   /*20÷670=3% 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
            float:right;
            display:inline;
        }
</style>

上述代码实现了三列，但是并没有实现两侧的背景图像，下面步骤来逐步实现：

1.给次内容区创建faux列

• 先创建一个faux图像，4000px宽，5px高。
• 因次要内容区是总宽度的25%，所以在背景图像上创建宽25%的对应区域，即图像的faux列部分是宽为1000px的灰色，其余为白色。
• 图像的faux列的右边缘与图像的左边相距25%，次内容区的右边缘与容器的左边相距25%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为25%，那么faux列的右边缘会正好与次内容区的右边缘对齐。

增加的代码为：

.wrapper{
    background:#fff url(1.gif) repeat-y 25% 0;
}

2.为主内容区创建背景

• 先创建一个faux图像。
• 因主内容区1是主内容区总宽度的72.82%，所以在背景图像上创建宽72.82%的对应区域为白色，其余为灰色。
• 图像的faux列的左边缘与图像的左边相距72.82%，次内容区的左边缘与容器的左边相距72.82%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为72.82%，那么faux列的左边缘会正好与次内容区的左边缘对齐。
• 因为在wrapper元素上已经应用了背景，所以需要添加一个容器元素，然后将该faux列的背景图像应用于这个新的容器元素，即inner-wrapper元素。

增加的代码为：

.inner-wrapper{
    background:#fff url(2.gif) repeat-y 72.82% 0;
}