Question

我正在尝试使用display：table进行布局（因为它似乎是实现相同颜色的最佳方式）。

这是一个与我想要的紧密相关的小提琴：的 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; BASE 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替代方案， 这项工作可能会破坏，只允许第一个col宽度的％。

<强> DEMO

display:table BASE 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>

布局与显示：表采取身高

1 个答案: