固定/流动混合布局做首页

效果图.jpg

这是传统的页面布局方式，里面有几个小知识点。

• 三个栏的宽度如何设置，采用的是xx%方式。
• 中间三个栏如何固定，采用的是float方式。
• 因为文字内容较少，背景颜色只会填充padding部分，如何使栏适度变长。

根据上面提出的问题，最后一个是稍微难点的，
因为背景颜色填充的是padding区域，我们可以想把padding-bottom拉长，这样背景颜色就会相机变长。但是又会出现一个问题，页面会根据你文本的长度基础上增加padding-bottom的长度。就会出现下面长短不一的局面。

底部长度不一的局面.jpg

并且footer也被隔的很开。如何解决呢？

试着用margin属性呢？

padding-bottom: 2000px;
margin-bottom: -2000px;

因为margin表示的模块之间的距离，我们就想把尾部和三个栏之间的距离往上顶2000px，不就回到了最大文本所占的地方。

这样做发现footer不见了，为什么呢？

因为foote往上面升了，导致跟上面元素重合，无法显现。

该怎么让footer出现呢？

只要让三栏所超出的部分隐藏起来就行了

overflow：hidden

总的代码如下

  body{
margin: 0;
padding: 0;
min-width: 525px;
}

/在固定/流动混合布局中定义两栏/

  header,footer{
float: left;
width: 100%;
height: 30px;
background-color: #7152f4;
  }

/三个栏的母元素/

wrapper{

position: relative;
width: 100%;
overflow: hidden;

}

left_side{

width: 25%;
margin-bottom: -2000px;
padding-bottom: 2000px;
float: left;
background-color:orange;

}

content_area{

width: 50%;
margin-bottom: -2000px;
padding-bottom: 2000px;
float: left;
background-color: #fff;

}

right_side{

width: 25%;
margin-bottom: -2000px;
padding-bottom: 2000px;
float: right;
background-color: pink;

}