解决CSS高度问题

Question

好的，任何已经使用css和html足够长时间的人可能已经处理了“身高：100％”这些荒谬问题。我已经阅读了一些处理它的东西，但没有多大帮助。以下是我需要构建的布局。我希望很好的答案能帮助我解决大多数其他需要身高的结构。
规则：

• 必须填写的浏览器窗口，而不给予任何滚动。
• 容器的高度不得超出可见区域（即不需要“溢出：隐藏”在html或body标签只是删除滚动条）
• 柔性区域应调整到给定像素测量，而FILLER应该填充任何可用的区域。
• 所有区域的尺寸应严格控制在溢出时应切断其内容，而不要使区域变大。
• 如果可能，我会宁愿没有“位置：固定”或“位置：绝对”，如果任何时候以后我需要这样的结构内部其他包装，但现在我会很高兴能够以任何方式。
• 最后，我真的不想使用它的JavaScript。

 
+-------------------------------------------+ 
|     FLEX /\     | 
|      \/     | 
+-----------------------------------+-------+ 
|         |  | 
|         |  | 
|         |  | 
|         |  | 
|    /\     |  | 
|   <FILLER>    | FLEX | 
|    \/     | <- -> | 
|         |  | 
|         |  | 
|         |  | 
|         |  | 
+-----------------------------------+-------+ 

编辑：
到目前为止，我发现我能达到什么样的@cimmanon说的话在他的第二个例子，再加上消除了对头部的侧多余的空间。我通过创建两个表（一个用于包装标题和另一个包装内容和边栏的表）来做到这一点，这是一种不好的做法。但是，如果它是唯一的方法来做到这一点（当试图坚持经典的CSS，并避免使用像flexbox黑客），然后我坚持它。

我还有一个问题，这也是在@ cimmanon的第二个例子中发现：我的一个规则的状态：所有区域应严格尺寸使得它们的含量应溢出时被切断，没有使该地区更大。。在为每个容器添加了一堆随机框之后，我发现它们将底部的两个容器推出了浏览器的底部，创建了一个滚动条。这是因为讨厌的概念，高度：100％意味着浏览器的视口高度，或者内容的高度，如果它更高 - 在这种情况下是这样。

有没有办法解决这个问题？

Answer 1

给一个固定的高度，你的包装，然后除以Flex和使用的填料百分比 的高度（eg.flex = 25％和填料= 75％） 或 你将不得不使用JavaScript（window.innerHeight）用于获取页面被浏览的窗口的高度。

Answer 2

最优雅的方法是使用Flexbox。

http://codepen.io/cimmanon/pen/rifzt

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

#layout { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100%; 
    /* fix for old Firefox */ 
    width: 100%; 
} 

#layout header { 
    height: 10em; 
    background: #ffffcc; 
} 

.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1 auto; 
    -ms-flex: 1 auto; 
    flex: 1 auto; 
    /* fix for old Firefox */ 
    width: 100%; 
} 

#layout article { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

#layout aside { 
    width: 15em; 
    background: #ccccff; 
} 

<article id="layout"> 
    <header> 
    <h1>Header Title</h1> 
    </header> 

    <div class="wrapper"> 
    <article> 
     <h1>Another Title</h1> 

     <p>...</p> 
    </article> 

    <aside> 
     <h1>Aside Title</h1> 

     <p>...</p> 
    </aside> 
    </div> 
</article> 

http://caniuse.com/flexbox

你可以用表/表行/表单元格显示属性，而不是这样做，但你必须增加很多额外的标记来获得它工作。

这几乎的作品，但标题不完全跨越视口的整个宽度。如果你添加了足够的元素，你可能可以做到。

http://tinker.io/38b0d

html { 
    height: 100%; 
} 

body { 
    display: table; 
    width: 100%; 
    height: 100%; 
    background: yellow; 
} 

header { 
    height: 10em; 
    display: table-row; 
} 

article { 
    display: table-row; 
    height: 100%; 
    width: 100%; 
    background: grey; 
} 

article div, article aside { 
    display: table-cell; 
    height: 100%; 
} 

article aside { 
    width: 10em; 
    background: orange; 
} 

<header>Header</header> 

<article> 
    <div class="main"> 
     Remaining Space 
    </div> 

    <aside> 
     Sidebar 
    </aside> 
</article>