Css fluid layout with two columns [duplicate]

问题

I need to do a layout in this way:

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

I want the overall width to be 100% of the body, the navigation has width 15% but min-width 120px. The width of the bar (that is an element in the content div) has to be 100% of the content div.

In the html I have the limitation that the navigation div has to go before the content div.

EDIT: My code in the html is

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

The code i have in the css right now is:

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

Could you help me please?

回答1:

I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.

Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.

*{
  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>

回答2:

This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)

*{
  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>

来源：https://stackoverflow.com/questions/42139475/css-fluid-layout-with-two-columns

标签

html

css

fluid-layout