具有 100% 高度的两列布局。一个固定柱和一个流体柱[重复]

Question

我需要创建一个两列布局 (Online Example)：

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

1. 标题宽度必须固定；
2. 主宽度必须是可变的 (%) 宽度是最大宽度（以像素为单位）；
3. 页眉和主高度必须为 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 之前，body {..} 部分。

Answer 2

在第 6 行，只需删除 // *，您的代码就可以正常工作了！

Answer 3

我需要创建一个两列布局... 1. 标题宽度必须固定；

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

1. 主宽度必须是可变的 (%) 宽度是最大宽度，以 % 为单位

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

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

1. 标题和主高度必须为 100%

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

看看，文本是如何脱离包装的......

当然，您还没有指定当内容超出范围时该怎么做。您需要在 wrapper 上指定您需要的 overflow 属性。

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

另外，我不明白为什么你的main 中有一个wrapper。这似乎是多余的，没有用。