css - 两栏布局，内容优先

Question

HTML：

<div id="main">
    <div id="sidebar"></div>    
    <div id="content"></div>        
</div>

CSS：

#content {
    background: blue;
    height: 900px;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red
}

JSFIDDLE：http: //jsfiddle.net/aFrPc/

虽然这可行，但我想先#content列出（而不是#sidebar）。div #content 必须填满所有剩余空间。

最终想要的结果图片：

Answer 1

尝试这个。#Content 排在最前面，占用 200px 侧边栏后 100% 的剩余空间：

body{
  overflow-x:hidden;
}
#content {
  background: blue;
  height: 900px;
  position:absolute;
  width:100%;
  left:200px;
}

#sidebar {
  float: left;
  width: 200px;
  height: 900px;
  background: red
}

jsfiddle：http: //jsfiddle.net/VkQ6U/

Answer 2

更新如果他想要sidenav文本之前的内容文本。 小提琴

    <div id="main">
    <div id="content">
        <div style="padding-left:200px">
        Context
        </div>
    </div>        
    <div id="sidebar">sidebar</div>    
</div><!--#main-->

#content {
    background: blue;
    height: 900px;
    width:100%;
    margin-left:-200px;
    float:right;
    color:#fff;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red;
}