我知道我们可以calc在定义长度时使用：
flex-basis: calc(33.33% - 60px);
left: calc(50% - 25px);
height: calc(100em/5);
但是如果长度是可变的呢？
height: calc(100% - <<header with variable height>>);
或者
width: calc(100% - 50px - <<box with variable width>>);
在 CSS 中是否有标准的方法来做到这一点？
我知道使用 flexbox 和表格可以完成整个任务，但我想知道 CSS 是否提供了更简单的方法。Flexbox、表格和简单的 Javascript 是可接受的替代品。
您可以使用 CSS 表：
.wrapper {
display: table;
width: 100%;
margin: 15px 0;
}
.horizontal.wrapper > div {
display: table-cell;
white-space: nowrap; /* Prevent line wrapping */
border: 1px solid;
}
.left { width: 100px } /* Minimum width of 100px */
.center { width: 0; } /* Width given by contents */
.vertical.wrapper { height: 200px; }
.vertical.wrapper > div {
display: table-row;
}
.vertical.wrapper > div > span {
display: table-cell;
border: 1px solid;
}
.top { height: 100px; } /* Minimum heigth of 100px */
.middle { height: 0; } /* Height given by content */
.bottom { height: 100%; } /* As tall as possible */<div class="horizontal wrapper">
<div class="left">100px wide</div>
<div class="center">Auto width, given by contents</div>
<div class="right">Remaining space</div>
</div>
<div class="vertical wrapper">
<div class="top"><span>100px tall</span></div>
<div class="middle"><span>Auto height, given by contents</span></div>
<div class="bottom"><span>Remaining space</span></div>
</div>水平情况也可以用浮点数来实现：
#wrapper, .right { overflow: hidden; } /* Establish BFC */
#wrapper > div { border: 1px solid; }
.left, .middle { float: left; }
.left { width: 100px }<div id="wrapper">
<div class="left">100px</div>
<div class="middle">Auto width, given by contents</div>
<div class="right">Remaining space</div>
</div>Flexbox 可以做到这一点。
支持 IE10 及更高版本。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
}
#top {
background-color: lightgreen;
}
#bottom {
background-color: lightblue;
flex: 1;
}<div id="container">
<div id="top">green box variable height</div>
<div id="bottom">blue box no longer overflows browser window</div>
</div>我正在寻找简单便携的东西。以同样的方式，可以轻松地跨文档应用 CSS 属性，我正在寻找在此功能的易用性方面类似的东西。
...隔离修复是首选。
这只能使用 CSS 来实现。由于您不喜欢flex布局解决方案，下一个最佳选择是表格布局。
您可以放入项目（并完成）的简单 CSS 片段如下所示：
div.flexh {
display: table; box-sizing: border-box; padding: 0; margin: 0;
}
div.flexh > div {
display: table-cell; width: auto;
box-sizing: border-box; vertical-align: middle;
}
div.flexh > div:first-child {
/* Override your custom styling below */
min-width: 75px; width: 75px; max-width: 75px;
}
div.flexh > div:last-child { width: 100%; }
然后，您可以根据站点要求将站点特定的样式添加到此基本 CSS。之类的nowrap。
该解决方案的两个明显优势是：
flexh应用于您的父母div，就可以了。所需的最少标记：
<div class="flexh">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
演示小提琴：http : //jsfiddle.net/abhitalks/qqq4mq23/
演示片段：
在没有flex布局的情况下实现这一点有点棘手。表格布局在这里不起作用，主要是因为它table-row不会按照您的用例的要求保持固定的高度。在height上一个table-row或table-cell仅仅是一个指示所需要的最小的高度。如果空间受限，或者内容超过可用空间，则cell或row将根据内容增加其高度。
根据这里的规格：http : //www.w3.org/TR/CSS21/tables.html#height-layout
'table-row' 元素框的高度在用户代理拥有行中所有可用单元格后计算：它是该行计算的“高度”的最大值，该行中每个单元格的计算“高度”，以及单元格所需的最小高度 (MIN)...
...单元格框的高度是内容所需的最小高度
这种效果可以在这里看到：http : //jsfiddle.net/abhitalks/6eropud3/
（调整窗口窗格的大小，您会看到第一行的高度会增加，因为内容无法适应指定的高度，从而达不到目的）
因此，您可以使用内部标记（如 div 元素）间接限制高度，或者放弃表格布局并计算灵活布局的高度。在您的用例中，您不想更改标记，因此我不建议使用内部标记。
这里最好的选择将是使用普通的经过时间考验的模型block-level divs的要计算的灵活的高度。正如您已经发现使用 CSS 无法实现的那样，您需要一个小的 JavaScript 片段来为您做到这一点。
一个简单的 JavaScript 片段（没有 jQuery），你可以用 a 包裹window.load并放入你的项目（并完成）看起来像这样：
var flexv = document.querySelectorAll('div.flexv');
/* iterate the instances on your page */
[].forEach.call(flexv, function(div) {
var children = [].slice.call(div.children), // get all children
flexChild = children.splice(-1, 1), // get the last child
usedHeight = 0, totalHeight = div.offsetHeight;
children.forEach(function(elem) {
usedHeight += elem.offsetHeight; // aggregate the height
});
/* assign the calculated height on the last child */
flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});
CSS 片段或多或少类似于水平片段，没有表格布局，您也可以将其放入项目并添加额外的特定于站点的样式。所需的最少标记保持不变。
演示小提琴 2：http : //jsfiddle.net/abhitalks/Ltcuxdwf/
演示片段：
注意：正如@LGSon 所指出的，display: inline-table用于演示的 Firefox 不能很好地运行。这仅用于演示，应替换为block或inline-block根据您的用例。
更新
正如我之前评论的那样，除此之外flex，这也是可以解决的，这是我制作的display: table一个小提琴演示。
如果垂直演示还需要固定顶部，这是我原始display:table版本的更新：小提琴演示
有时我无法（或不想）使用 flex 或表格，而且我一直在研究使用css calc()和css attr()。
但是两者都很短，因为calc()只能使用+-*/并且attr()只能返回一个字符串值，不能由calc().
我的建议，使用普通的 javascript，基于这两种方法，在某些时候，可能会被扩展，以便我们可以更好地利用它们。
这就是我希望看到它们工作的方式；
width: calc(100% - attr(this.style.left))
但因为他们没有，我也不能将它添加到我的 css 中，因为它无法正确验证（甚至可能破坏解析，谁知道）我添加了一个变体作为元素的属性，但有一些怪癖以便于计算。
在这种情况下（2 个演示），它看起来像这样：
//height
<div id="bottom" data-calcattr="top,height,calc(100% - toppx)">...</div>
//width
<div class="box right" data-calcattr="left,width,calc(100% - leftpx)">...</div>
连同下面的脚本，它绝不是在所有属性组合上完全开发/测试的，它确实调整了 div 的大小。
简而言之，当运行时，它获取属性，将其拆分为一个数组，将第一个项目值作为要读取的属性，第二个要设置的属性以及第三个读取值被插入/替换和分配的值到要设置的属性（嗯，仍在努力寻找一种更好的方式来表达这一点，但希望脚本对正在发生的事情足够清楚）。
function calcattr() {
var els = document.querySelectorAll('[data-calcattr]');
for (i = 0; i < els.length; i++) {
var what = els[i].getAttribute('data-calcattr');
if (what) {
what = what.split(',');
var rect = els[i].getBoundingClientRect();
var parentrect = els[i].parentNode.getBoundingClientRect();
var brd = window.getComputedStyle(els[i].parentNode,null).getPropertyValue('border-' + what[0] + '-width');
what[2] = what[2].replace(what[0],parseInt(rect[what[0]]-parentrect[what[0]]) - parseInt(brd));
els[i].setAttribute("style", what[1] + ":" + what[2]);
}
}
}
虽然我从未尝试过，但我相信这会奏效：
.top {
height:13px;
}
.main {
height:calc(100% - var(height));
}
http://www.creativebloq.com/netmag/why-you-need-use-css-variables-91412904
$top_height: 50px
.main {
height: calc(100% - $top_height)
}