高度100%的两列布局。一个固定柱和一个流体柱
我需要创建一个双列布局(在线示例)：
<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;
}然而，标题和主不是100%的高度。
有人知道怎么解决这个问题吗？
更新1
另一个问题的代码不工作！
检查相同的代码，但使用更多文本：http://plnkr.co/edit/xM0BnHbF5Dh08EvrGY2V?p=preview
看，文字是怎么从包装纸里出来的.
更新2
我在左边加了一个菜单。移动鼠标悬停项目"A"，"B“等，看看它应该如何工作。菜单很好..。我不想破坏它。
回答 3
Stack Overflow用户
发布于 2015-08-12 21:58:48
演示：http://codepen.io/awesomeaniruddh/pen/bdJBZy
添加以下代码：
html {
height: 100%:
}在html之前，主体{.}部分。
Stack Overflow用户
发布于 2015-08-12 21:59:42
在第6行中，只需删除// *，您的代码就能正常工作！
Stack Overflow用户
发布于 2015-08-13 10:33:56
我需要创建一个两列布局..。1.报头宽度必须固定；
如果您想要柱状布局，为什么要使用header。如果您打算使用这个块作为侧边栏中的导航，为什么不使用更语义的nav或aside。
- 主宽度必须是流体(%)宽度最大宽度(%)
但在您的css中，您指定的是width: 100%，然后是以像素为单位的max-width，以及margin of 44px.为什么？
只需删除width和margin-right，只保留max-width的百分比。
- 头高度和主高度必须是100%
这在你的代码中很好。但是，那里有多余的规则。只需从html和body中移除高度，并指定高度为100vh的两列。
看，文字是怎么从包装纸里出来的.
当然，当内容超出范围时，您还没有指定该做什么。您需要在您的overflow上指定所需的wrapper属性。
在您的代码中看到这些更改： http://plnkr.co/edit/x4eKxAiJiKgthhMJJ31t?p=preview
而且，我也无法理解为什么您的main__中有一个main。这似乎是多余的，没有任何用处。
https://stackoverflow.com/questions/31975979
复制相似问题
腾讯云开发者
