具有静态和响应宽度的两列模板

有时我们需要结合百分比和固定值来计算尺寸，特别是在创建一些响应式布局时。就我而言，我只发现两种方法可以在纯 CSS 中实现所需的效果。

Problem

让我们快速看一下这个问题 - 我们需要创建一个拉伸到页面整个宽度的两列布局，其中一列具有恒定的宽度。

<section>
  <article>I fill out all the available space!</article>
  <aside>I'm 50px width!</aside>
</section>

解决方案 1 - 使用 calc() 函数

Example: FIDDLE http://jsfiddle.net/prp2udtx/1/

The calc()函数使我们能够组合百分比和固定值，例如：

article {
  width: calc(100% - 50px);
}

不幸的是，这不是跨浏览器解决方案（http://caniuse.com/#search=calc http://caniuse.com/#search=calc） 并且建议使用后备（http://html5please.com/#calc http://html5please.com/#calc).

解决方案2 - 跨浏览器固定布局表格

Example: FIDDLE http://jsfiddle.net/83sbg0m4/1/

默认表格中每列的宽度是自动计算的，取决于单元格的内容。为了解决这个问题，我们需要强制列的大小，因此另一个解决方案使用具有table-layout属性设置为fixed。它使我们能够设置任何列的宽度。我修改了 HTML 结构，但也可以通过操作来实现display财产...（丑陋的例子：FIDDLE http://jsfiddle.net/prp2udtx/2/)

Summary

这是响应式世界中一个非常常见的问题，我很好奇是否有其他想法如何在纯 CSS 和 HTML 中解决它。任何对此的想法将不胜感激。

Regards.

EDIT

感谢大家的贡献！
我同意我所展示的问题太简单了:)
您可以找到有关该问题的进一步讨论here https://stackoverflow.com/questions/26001765/research-on-creating-grids-that-combine-percentage-and-static-e-g-pixel-value.

这是使用正常的遗留（回到 ie8）支持最简单的事情。

http://jsbin.com/moveqe/1 http://jsbin.com/moveqe/1

HTML

  <aside>Fixed width </aside>
  <section>Rest of page </section>

CSS

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}
aside,
section {
    box-sizing: border-box;
    float: left;
    min-height: 100%;
}
aside {
    background: pink;
    width: 200px;
    margin-right: -200px;
    position: relative;
    z-index: 1;
}
section {
    width: 100%; /* this does not have to be set if it's 100% */
    background: yellow;
    padding-left: 200px;
    position: relative;
}