首页 > html > two_column > CSS Layout - 如何在左侧栏中创建两个包含多个部分的列布局

CSS Layout - 如何在左侧栏中创建两个包含多个部分的列布局

two_column 【two_column】
我们想知道如何在左侧栏中创建两个包含多个部分的列布局。
代码展示 运行结果 

<html>
<head>

<style type='text/css'>
* {
  margin: 0;
  padding: 0;
}

html, body, .parent {
  height: 100%;
}

.parent {
  margin: auto;
  width: 1000px;
}

.leftPanel {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
}

.bodyContent {
  float: left;
  width: 800px;
  height: 100%;
  position: relative;
}

.leftContent1, .leftContent2, .leftContent3, .bodyContent1,
  .bodyContent2, .bodyContent3 {
  border-bottom: 1px solid #000000;
  position: absolute;
  left: 0;
  right: 0;
}

.leftContent1 {
  background-color: #cccccc;
  height: 125px;
}

.leftContent2 {
  background-color: #999999;
  height: 150px;
  top: 125px;
}

.leftContent3 {
  background-color: #ff0000;
  top: 275px;
  bottom: 0;
}

.bodyContent1 {
  background-color: #fcfcfc;
  height: 120px;
}

.bodyContent2 {
  background-color: orange;
  height: 80px;
  top: 120px;
}

.bodyContent3 {
  background-color: #00ff00;
  top: 200px;
  bottom: 0;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="leftPanel">
      <div class="leftContent1">Left Content1</div>
      <div class="leftContent2">Left Content2</div>
      <div class="leftContent3">Left Content3 This Section needs to
        beexpand till the end of the browser window Without having browser
        scroll</div>
    </div>
    <div class="bodyContent">
      <div class="bodyContent1">Body Content1</div>
      <div class="bodyContent2">Body Content2</div>
      <div class="bodyContent3">Body Content3 This Section needs to
        beexpand till the end of the browser window Without having browser
        scroll</div>
    </div>
  </div>
</body>
</html>