设置一个元素的长度（高度或宽度）减去另一个元素的可变长度，即calc（x – y），其中y未知
我知道我们可以在定义长度时使用calc ：
flex-basis: calc(33.33% - 60px); left: calc(50% - 25px); height: calc(100em/5);
但是如果长度是可变的呢？
height: calc(100% - <>);
要么
width: calc(100% - 50px - <>);
在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 */
100px wide Auto width, given by contents Remaining space 100px tall Auto height, given by contents Remaining space
Flexbox可以做到这一点。
支持IE10及以上。
JSfiddle演示
* { 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; }
green box variable height blue box no longer overflows browser window
我正在寻找简单便携的东西。 以同样的方式，CSS属性可以轻松地跨文档应用，我正在寻找类似于此function的易用性方面的东西。
…隔离修复是首选。
水平：
这可以仅使用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。 喜欢，现在等
该解决方案的两个明显优势是：
- 您不需要更改标记，也不需要使用类来装饰所有子项。 只需将
flexh类flexh父div。
需要最小标记：
... ... ...
- 您不仅限于三列。 您可以根据需要拥有尽可能多的列。 第一个将具有固定宽度，最后一个将是灵活的，并且中间的所有列将获得基于内容的宽度。
演示小提琴： http ： //jsfiddle.net/abhitalks/qqq4mq23/
演示片段：
div.flexh { display: table; box-sizing: border-box; padding: 0; margin: 0; /* Override your custom styling below */ width: 80%; border: 2px solid black; border-right: 2px dashed black; font-size: 1em; } div.flexh > div { display: table-cell; width: auto; box-sizing: border-box; vertical-align: middle; /* Override your custom styling below */ background-color: lightgreen; border: 1px solid #ddd; padding: 15px 5px; } div.flexh > div:first-child { /* Override your custom styling below */ min-width: 75px; width: 75px; max-width: 75px; background-color: orange; } div.flexh > div:last-child { width: 100%; /* Override your custom styling below */ background: skyblue; }
75px Fixed Width Variable Content Width Flexible Remaining Width
75px Fixed Width 
Flexible Remaining Width
75px Fixed Width Variable TextWidth Variable ContentWidth
Flexible Remaining Width
更新
正如我之前评论的那样，除了flex之外，这也可以使用display: table ，这里是我演示的小提琴演示 。
如果垂直演示也需要固定的顶部，这里是我原始display:table的更新display:table版本： 小提琴演示
有时候我不能（或者不想）使用flex或者表格，而且我已经开始使用css calc（）和css attr（） 。
两者都很简短，因为calc()只能使用+-*/和attr()只能返回一个字符串值，而这个值不能通过calc()来计算。
我的建议，使用普通的javascript，是基于这两种方法，在某些时候，可能会扩展，所以我们可以更好地利用它们。
这就是我希望他们看到它们的工作方式;
width: calc(100% - attr(this.style.left))
但是他们不这样做，我也无法将它添加到我的CSS中，因为它不能正确validation（甚至可能会破坏解析，谁知道）我在元素上添加了一个变量作为属性，但有一些怪癖使计算更容易。
在这种情况下（2个演示）它看起来像这样：
//height ... //width ...
与下面的脚本一起，它不会在所有属性组合上完全开发/测试，它会调整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]); } } }
在CSS中
虽然我从未尝试过，但我相信这会奏效：
.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) }
CSS calc（）函数中的Sass变量
在容器css的两种情况下，你应该把：
#container { overflow: hidden; }
但是，它会隐藏溢出容器的信息。 我认为这是重点，因为你把white-space: nowrap; 这意味着您不想更改高度，因此您必须隐藏不适合容器的文本。