设置一个元素的长度（高度或宽度）减去另一个元素的可变长度，即calc（x-y），其中y未知

Question

我知道当定义长度时，我们可以使用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是可接受的替代方案。

高度演示

宽度演示

Answer 1

我在找简单便携的东西。同样，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中。比如now rap等。

这种解决方案的两个明显优点是：

1. 您不需要更改标记，也不需要用类装饰所有子级。只需将类flex应用于您的父级div，就可以了

所需的最小标记：

<div class="flexh">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</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;
}

<div class="flexh">
    <div>75px Fixed Width</div>
    <div>Variable Content Width</div>
    <div>Flexible Remaining Width</div>
</div>

<hr/>
<div class="flexh">
    <div>75px Fixed Width</div>
    <div><img src='//placehold.it/128x48/66c' /></div>
    <div>Flexible Remaining Width</div>
</div>

<hr/>
<div class="flexh">
    <div>75px Fixed Width</div>
    <div>Variable TextWidth</div>
    <div>
        <img src='//placehold.it/128x48/66c' />
        <p>Variable ContentWidth</p>
    </div>
    <div>Flexible Remaining Width</div>
</div>

Answer 2

Flexbox可以做到这一点。

支持IE10及以上。

JSFIDLE演示

* {
  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>

Answer 3

您可以使用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>