css - 显示 :table to take body height 的布局

Question

我正在尝试使用 display:table 进行布局(因为这似乎是实现等列的最佳方式)。

这是一个接近我想要的东西的 fiddle :<强> http://jsfiddle.net/elvista/ATWR3/

要求:

• 侧边栏和内容应具有相同的高度(已实现)
• 边栏是固定宽度的，内容是流动的(似乎不起作用)。
• 页脚应放置在内容内部并固定在底部(已实现)
• 如果内容和侧边栏都没有内容，#wrapper 应该占据与主体相同的高度(可能使用 CSS？)

对于这两个问题中的任何一个，我们都将不胜感激。

Here is a fiddle which goes closely to what I want:

http://jsfiddle.net/elvista/ATWR3/

Answer 1

最好是使用 display:flex;

DEMO

display:flex; 基本 CSS 示例:

html, body {
  height:100%;
  margin:0;
  box-sizing:border-box;
} 
body {
  display:flex;

  flex-direction:column;
}
main {
  flex:1;
  display:flex;
}
aside ,article{
  flex: 2;
}
aside {
  flex:1;
}

---

对于 display:table，您需要变通，因为 colspan 没有 CSS 替代方案，此变通办法可能会中断，并且第一个列宽度仅允许 %。

DEMO

display:table 基本 CSS 示例:

html, body {
  width:100%;
  height:100%;
  margin:0;
} 
body {
  display:table;
}
header, main, footer
{
  display:table-row;
}
main {
  height:100%;
}
aside ,article{
  display:table-cell;     
}
aside {
  width:33.5%;
}
header div , footer  div{  
  width:300%;/* = (100% / width of aside ) * 100 */ 
  /* pickup first cell width to scalculate width rescaled , here aside */
} 

两个示例的 HTML:

<header>
  <div>header</div>
</header>
<main>
  <aside>
    aside
  </aside>
  <article>
    article
  </article>
</main>
<footer>
  <div>footer</div>
</footer>