Css 具有两列的流体布局

Question

我需要这样布局：

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

你能帮帮我吗？

Answer 1

此方法是静态的，不允许百分比（您必须对其他屏幕尺寸使用媒体查询。）

*{
  margin: 0;
  padding: 0;
}

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

.sidebar{
  box-sizing: border-box;
  float:left; 
  background: #06f;
  display:block;
  width: 120px;
  padding: 10px;
}

.content{
  box-sizing: border-box;
  padding: 10px;
  display:block;
  background:#ddd;
  margin-left: 120px;
}

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

Answer 2

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

Flex-basis（又名 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>

Css 具有两列的流体布局

Css fluid layout with two columns

html

css

fluid-layout