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;  
}

但是，标题和主要不是100％的高度。

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

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

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

请参阅文本如何脱离包装器...

更新2
我在左边添加了一个菜单。移动鼠标悬停项目＆＃34; A＆＃34;，＆＃34; B＆＃34;等，看看它应该如何工作。菜单工作正常......我想不打破它。

Answer 1

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

添加以下代码：

html {
    height: 100%:
}

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

Answer 2

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

Answer 3

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

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

主要宽度必须为流体（％）宽度，最大宽度为％

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

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

标题和主要高度必须为100％

你的代码很好。但是，那里有多余的规则。只需从html和body中移除您的高度，然后指定两个高度为100vh的列。

请参阅文本如何脱离包装器...

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

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

此外，我无法理解为什么wrapper内有main。这似乎是多余的，毫无用处。

两列布局，高度为100％。一个固定柱和一个流体柱

3 个答案: