首页 > html > three_column > CSS Layout - 如何使三栏布局与底部

CSS Layout - 如何使三栏布局与底部

three_column 【three_column】
我们想知道如何使三栏布局与底部。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
#container {
  margin: 0 auto;
  height:100%;
}

#container .column {
  position: relative;
}

#center {
  min-width: 400px;
  max-width: 800px;
  margin-left: 200px;
  margin-right: 200px;
  background: #DDD;
}

#left {
  float: left;
  width: 200px;
}

#right {
  float: right;
  width: 200px;
}

#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 200px;
}
body {
  margin: 0;
  padding: 0;
}

#header, #footer {
  width: 100%;
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background: #999;
}

#left {
  background: #66F;
}

#right {
  background: #F66;
}

#container .column {
  padding-top: 1em;
  text-align: justify;
}
</style>
</head>
<body>
<html>
<head></head>
<body>
  <div id="header">This is the header.</div>
  <div id="container">
    <div id="right" class="column">
      <h2>This is the right sidebar.</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
    <div id="left" class="column">
      <h2>This is the left sidebar.</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
    <div id="center" class="column">
      <h1>This is the main content.</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
  </div>
  <div id="footer">This is the footer.</div>
</body>
</html>