css三栏布局 上下固定

CSS三栏布局是Web开发中常用的一种布局方式。它将页面分为左、中、右三栏，并且上下是固定的。下面我们来介绍一下实现该布局的代码。

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  height: 100px;
  background: #ccc;
}

#main {
  height: 100%;
}

#left {
  float: left;
  width: 200px;
  height: 100%;
  background: #ff0;
  margin-top: -100px;
  /* 上单行的负外边距将左侧框架上移 */
}

#right {
  float: right;
  width: 200px;
  height: 100%;
  background: #00f;
  margin-top: -100px;
  /* 上单行的负外边距将右侧框架上移 */
}

#content {
  margin: 0 200px;
  /* 左右两栏框架的宽度 */
  height: 100%;
  background: #0f0;
}

#footer {
  height: 100px;
  background: #666;
} 

上述代码中，我们首先将html和body元素的高度都设置为了100%，这样可以让整个页面占据整个浏览器窗口。然后，我们定义了header、main、left、right、content和footer这几个元素。其中，header和footer元素是页面顶部和底部的固定元素，它们的高度都为100px，分别设置了不同的背景色。

接着，我们设置了main元素的高度为100%，这样就可以让left、content和right元素都充满页面的垂直高度。然后，我们使用float属性使left元素向左浮动，right元素向右浮动。注意，这里需要将left和right元素的高度设置为100%才能让它们充满main元素的高度。另外，使用margin-top将left和right元素上移了100px，这样就不会遮挡header元素了。

最后，我们使用margin属性将content元素的左右边距设置为200px，这样就可以让它在left和right元素的中间位置了。content元素的高度也被设置为100%，这样就可以让其中的内容充满这个元素的高度。

通过使用上述代码，我们就可以实现一个基本的CSS三栏布局了。如果需要对该布局进行修改，可以按照上述代码的基础进行添加或者修改，以实现你想要的复杂布局。