html - 具有两列的CSS流体布局

This question already has answers here:

Two column layout with left fluid and right fill the rest width
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
我需要以这种方式进行布局：

----------------------
|   header           |
----------------------
|  N  |              |
|  A  |   CONTENT    |
|  V  |              |
|-----|              |
|     | ----BAR----  |
|EMPTY|              |
|     |              |
----------------------

我希望整体宽度为车身的100％，
导航的宽度为15％，最小宽度为120px。
条的宽度（即内容div中的元素）必须为内容div的100％。

在html中，我有一个限制，导航div必须在内容div之前。

编辑：
我在html中的代码是

<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>

我现在在CSS中拥有的代码是：

#nav {
    float: left;
    width: 15%;
    min-width: 120px;
    }
#content{
    float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}

请问你能帮帮我吗？

最佳答案

我更喜欢flexbox方法，但是请记住，这不适用于IE9及以下版本。

需要使用flex-basis（aka flex: {shrink} {grow} {flex-basis}），因为flex不能与CSS宽度一起很好地工作。

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  padding: 10px;
  flex: 0 0 120px;
  background: #07f;
}

.content{
  padding: 10px;
  background: #ddd;
  width: 100%;
}

.container{
  display: flex;
  flex-direction: row;
}

<header>
  This is the header
</header>

<div class="container">
  <div class="sidebar">
     This is the sidebar
  </div>

  <div class="content">
    This is the content
    <br>
    test
  </div>
</div>