高度为 100% 的两列布局。一根固定柱和一根流体柱

Question

我需要创建两列布局 (Online Example):

<header>
  A<br/>
  B<br/>
</header>    
<main>      
  <div class="wrapper">
    Vis iriure laboramus at. Quis audire ei vis ...
  </div>      
</main>

页眉宽度必须固定；
主宽度必须是流动的 (%) 宽度最大宽度（以像素为单位）；
页眉和主要高度必须为 100%。

我尝试了以下 CSS：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} // *

html, body {
  height: 100%;
  margin: 0;    
  padding: 0;
  width: 100%;  
}

body {
  background-color: black;
  overflow: hidden;
}

header {
  background-color: red;
  height: 100%;
  width: 44px;
  float: left;
}

main {
  background-color: green;
  height: 100%;
  margin-right: -44px;
  max-width: 400px;  
  width: 100%;          
  float: left; 
}

.wrapper {
  height: 100%;
  margin-right: 88px;          
  padding: 24px;  
}

但是，header 和 main 不是 100% 高度。

有人知道如何解决这个问题吗？

更新 1
Another Question 的代码不起作用！

检查相同的代码，但文本更多： http://plnkr.co/edit/xM0BnHbF5Dh08EvrGY2V?p=preview

看看，文本是如何从包装器中取出的...

更新 2
我在左侧添加了一个菜单。将鼠标悬停在 "A"、"B" 等项目上，看看它应该如何工作。菜单工作正常......我不想破坏它。

Answer 1

演示： http://codepen.io/awesomeaniruddh/pen/bdJBZy

添加以下代码：

html {
    height: 100%:
}

在 html 正文 {..} 部分之前。

Answer 2

在第 6 行中，只需删除 // *，您的代码即可正常运行！

Answer 3

I need to create a two column layout... 1. Header width must be fixed;

如果你想要柱状布局，为什么要使用 header。如果您打算将此块用作侧边栏中的导航，为什么不使用 nav 或 aside 这将更具语义。

Main width must be fluid (%) width a maximum width in %

但是在您的 css 中，您指定了 width: 100% 然后 max-width 像素，还有 margin 的 44px.. 为什么？

只需删除 width 和 margin-right，只保留 max-width 百分比。

Header and main heights must be 100%

你的代码很好。但是，那里有多余的规则。只需从 html 和 body 中删除您的身高，并指定高度为 100vh.

的两列

See, how text gets out of the wrapper ...

当然，您还没有指定当内容越界时要做什么。您需要在 wrapper.

上指定您需要的 overflow 属性

查看代码中的这些更改：http://plnkr.co/edit/x4eKxAiJiKgthhMJJ31t?p=preview

另外，我不明白为什么你的 main 里面有一个 wrapper。好像多余，没用。

高度为 100% 的两列布局。一根固定柱和一根流体柱

Two columns layout with 100% height. One fixed column and one fluid column

html

css

multiple-columns

fluid-layout