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

要保持列宽，您可以使用我在下面编写过的bootstrap或任何框架或自定义CSS。可以根据您的场景使用jquery完成。

.left-column,.right-column,.center-column{width:25%;display:inline-block;height:100vh;}
.center-column{width:50% !important;}

这将使侧柱为25％，中心为50％; vh代表视口高度。它会根据你的视口给你全高，没有任何定位黑客。

T0仅使中心部分可调整大小。我想你需要jquery。

Answer 2

这是你需要的吗？ 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;
  }

ALT VERSION 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;
  }

Answer 3

我建议使用Bootstrap，它易于使用和实施。

使用Bootstrap你可以得到类似的东西：

<div class="row">

<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>

</div>

这样就可以了。 Bootstrap使用网格布局系统，它是响应式的。在getbootstrap.com了解更多信息

3列布局（固定流体固定），全屏高度

3 个答案: