css - 如何制作响应式 3 栏网站？

Question

我正在尝试制作一个包含 3 栏的网站。左列和右列是附在两侧的 240 像素的小 div。中间的 div 是一个可拉伸(stretch)区域，里面的所有元素都会根据浏览器的大小进行拉伸(stretch)。

到目前为止，我的设置是这样的:

body, html {
height:100%;
} 

body {
margin:0;
}

 .container {
  background:orange;
  height:100%;
  width:100%;
  overflow:hidden;
 }

.left {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  left:0;

 }

.middle {
  width:100%;
  height:100%;
  background:orange;
  }

.right {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  }

并且:

 <div class="container">

  <div class="left"></div>
  <div class="middle">

     // all the content

  </div>
  <div class="right"></div>

  </div><!--container-->

如何让中间栏的内容停留在左右栏之间？我想使用 margin-left 和 margin-right 但我觉得这不是一个好方法这样做。

直播:

http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa

Answer 1

如果你支持现代浏览器，我会尝试使用 flexbox:

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
}
.container div {
  flex-grow: 1; 
  height: 50px;
}
.side {
  max-width: 240px;
  min-width: 240px;
  background: red;
}

<div class="container">
  <div class="side"></div>
  <div class="middle">
     // all the content
  </div>
  <div class="side"></div>
</div>

jsfiddle example

Flexbox resource