Html 两列布局，100%高度。一个固定柱和一个液柱

我需要创建一个两列布局（）：

但是，收割台和干管不是100%高度

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

更新1
的代码不起作用

检查相同的代码，但包含更多文本：

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

更新2
我在左边加了一份菜单。 移动鼠标悬停在项目“A”、“B”等上，查看其工作原理。 菜单很好用。。。我不想破坏它。

演示：

添加以下代码：

html {
    height: 100%:
}

---

在html之前，第6行的body{..}part.

只需删除

/*

，您的代码就可以正常工作了

我需要创建一个两列布局。。。 1.收割台宽度必须固定

如果您想要列式布局，为什么要使用

标题

。如果您打算将此块用作侧栏中的导航，为什么不使用更具语义的

nav

或

aside

主宽度必须为流体（%）宽度最大宽度，单位为%

但在css中，您指定的是

宽度：100%

，然后是

最大宽度

，以像素为单位，还有

边距

为

44px

。。为什么?

只需删除

宽度

和

右边距

，并仅保留

最大宽度

的百分比

收割台和主高度必须为100%

这在你的代码中很好。但是，这里有多余的规则。只需从

html

和

body

中删除高度，并将两列的高度指定为

100vh

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

当然，您还没有指定内容超出范围时要做什么。您需要在

包装器上指定所需的
溢出
属性

在代码中查看这些更改：

另外，我无法理解为什么在
main
中有一个
wrapper
。这似乎是多余的，毫无用处。
该死，我没听清楚！你的眼睛很锐利@AniruddhAgarwal谢谢：这是一个打字错误，但删除评论并不能解决问题：。在这个链接中，当文本很长时，您将看到它从主标记中出来。而且正文和html并没有填满整个页面。解决方法是添加溢出：隐藏到正文。。。但是我无法向下滚动页面。这并不能解决问题。。。检查更新示例：。查看内容是如何从main中出来的？用min height替换height可以解决问题，但随后红色背景的标题将停止显示。蓝色背景的链接仍然会显示出来。这样可以吗？…这不完美，但更好。但是，最小高度解决方案有一个问题。当正文中的文字很小时，正文高度将不会是100%。请在此处查看：。这是我一直试图解决的问题之一，当使用最小高度。这也解决了这个问题。我把
position:absolute
添加到了aside和main中，
left:44px到main。非常接近，但不完全。。。当您将窗口的大小调整到小于400像素时，主窗口应该调整大小，而不是。检查：仍然不工作。。。1.我同意必须放在一边，而不是头球；2-最大宽度以百分比表示。。。那是个打字错误。（2和4）：有一个理由，有44像素的保证金和包装。如果在减小浏览器宽度时删除此选项，则主视图将位于一旁，而不是并排。最后，我不想在主屏幕上有滚动条。。。我想在页面上有滚动条。什么不起作用？（1） 在调整大小时，没有主管道被搁置的问题。（2） 在此布局中，主屏幕上不能有滚动条。否则你的旁白也会滚动。（3） 我已经更新了plunker没有空白-我不介意在一旁滚动。。。我只需要它有44像素的宽度。我需要的主要高度是100%，这将是很好的除了高度也为100%，即使没有必要。主宽度应为流体，且不大于400px。未覆盖主或侧边的空间应具有不同的背景色。基本上，如果你检查所有我需要的，使主填充整个高度，如果可能，没有必要，侧边相同。我想把卷轴应用到页面上。这有意义吗？
* {
  -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;  
}

html {
    height: 100%:
}