根据内容，左右Div的动态大小

Question

我正在构建一个网页，主要内容左，右，右有3个DIV。这是一个粗略的设计：

<div id="content"> 
    <div id="left"></div>
    <div  id="right"></div>
    <div id="right2"></div>
</div>

这是它的CSS：

#content {
    height:auto;
    overflow:auto;
}
#left {
    float: left;
    min-height:700px;
    width: 70px;
    background-color:#6495ed;
    overflow:hidden;
}
#right {
    float: right;
    min-height:700px;
    width: 70px;
    background-color:#6495ed;
    overflow:auto
}
#right2 {
    float: right;
    min-height:700px;
    width: 450px;
    background-color:#FFFFF0;
    overflow:auto;
}

问题是3 div的左，右和右2根据内容大小不合适。如果主要上下文增加，他们坚持700px高度。如果我给高度：auto然后DIV不是＆ ＃39; t可见。 我附上了两张图片，以帮助您更好地理解： 所以基本上我想让左右DIV的大小动态，但是找不到办法去做。谢谢你的任何回复

Answer 1

尝试使用

display:table-cell;
height:auto;

现在我经常看到这个问题

JS Fiddle

Answer 2

请在div结构及其css下方使用。

 <div id="content" style="float: left; height: 700px; width: 100%;"> 
      <div class="content_blk">first block content</div>
      <div class="content_blk">second block content</div>
      <div class="content_blk">third block content</div>
    </div>

css
#content{
  float: left;
  height: 700px;
  width: 100%;
}
.content_blk {
  float: left;
  height: 500px;
  width: 100%;
}