html - 具有全屏高度的 3 列布局(固定-流体-固定)

Question

我正在尝试实现 3 列固定-流体-固定布局。此外，布局的高度必须占据整个屏幕，使其看起来像从上到下的 3 个实心列。

总结:

Left-column:   fixed-width
Center-column: resizeable-width
Right-column:  fixed-width

- The height for all 3 columns takes up entire screen.
- All 3 columns are always equal length.

我的问题是让最后一部分工作。我无法让所有 3 列的高度都相等。

这是我的 HTML/CSS:

<style type="text/css">
  .parent {
    margin-bottom:20px;
    position:relative;
    background-color: green;
  }

  .main {
    margin-left:20%;

    background:#ddd;
    padding: 10px;
    height: 100%;
  }

  .side {
    position:absolute;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }
</style>

<div class="parent">
  <div class="side left">
    Sub Content
  </div>
  <div class="main">
    Main Content<br>
    <img src="" width="200" height="600">
  </div>
  <div class="side right">
    Sub Content
  </div>
</div>

Answer 1

这是您需要的吗？ http://jsfiddle.net/3MfBa/

HTML:

<div class="side left">
    Sub Content
  </div>
  <div class="main">
    Main Content<br>
    <img src="" width="200" height="600">
  </div>
  <div class="side right">
    Sub Content
  </div>

CSS:

.main {
    position: absolute;
    top:0;
    bottom:0;
    left:20%;
    right:20%;
    background:#ddd;
    padding: 10px;
    overflow: auto;
  }

  .side {
    position:absolute;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

替代 CSS ( http://jsfiddle.net/DgPRZ/ ):

body { margin:0; padding:0;}

.main {
    margin-left:20%;
    margin-right:20%;
    background:#ddd;
    padding: 10px;
  }

  .side {
    position:fixed;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

替代版本 2(http://jsfiddle.net/B4X4p/2/):

HTML:

<div class="container">
  <div class="col side left">
    Sub Content
  </div>
  <div class="col main">
      <div class="main-content">
        Main Content<br>
      </div>
  </div>
  <div class="col side right">
    Sub Content
  </div>
</div>

CSS:

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

.container, .container > div.col {
    display: flex;
    flex: 1 0 auto;
}

.container {
    width:100%;
    min-height:100%;
}

.main {
    width: 60%;
    background:#ddd;
    float:left;
}

.main-content {
    padding: 10px;
}

  .side {
    width:20%;
    background-color: green;
    min-height:100%;
    float:left;
  }

  .left {
    background-color: red;
  }

  .right {
    background-color: blue;
  }