设置一个元素的长度（高度或宽度）减去另一个元素的可变长度，即calc（x-y），其中y是未知的 [英] Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown

问题描述

我知道我们可以使用

在CSS中有标准的做法吗？

我知道使用flexbox和表的整体任务是可能的，但我想知道if CSS提供了一个更简单的方法。 Flexbox，表格和简单的Javascript是可接受的替代方案。

height demo

width demo

解决方案

您可以使用CSS表格：

  .wrapper {display：table;宽度：100％; margin：15px 0;}。horizo​​ntal.wrapper> div {display：table-cell; white-space：nowrap; / *防止换行* / border：1px solid;}。left {width：100px} / *最小宽度为100px * /。center {width：0; } / *内容指定的宽度* /。vertical.wrapper {height：200px; } .vertical.wrapper> div {display：table-row;}。vertical.wrapper> div> span {display：table-cell; border：1px solid;}。top {height：100px; } / *最小高度为100px * /。middle {height：0; } / *由内容给出的高度* /。bottom {height：100％; } / *尽可能高* /  

 < div class =horizo​​ntal wrapper> < div class =left> 100px wide< / div> < div class =center>自动宽度，由内容指定< / div> < div class =right>剩余空间< / div>< / div>< div class =vertical wrapper> < div class =top>< span> 100px高< / span>< / div> < div class =middle>< span>自动高度，由内容指定< / span>< / div> < div class =bottom>< span>剩余空间< / span>< / div>< / div>  

水平示例也可以通过浮动数据实现：

  #wrapper ，.right {overflow：hidden; } / *建立BFC * /＃wrapper> div {border：1px solid; } .left，.middle {float：left; } .left {width：100px}  

 < div id =wrapper> < div class =left> 100px< / div> < div class =middle>自动宽度，由内容< / div> < div class =right>剩余空间< / div>< / div>  

b

I know we can use calc when lengths are defined:

flex-basis: calc(33.33% - 60px);
left: calc(50% - 25px);
height: calc(100em/5);

But what if a length is variable?

height: calc(100% - <<header with variable height>>);

OR

width: calc(100% - 50px - <<box with variable width>>);

Is there a standard way to do this in CSS?

I know the overall task is possible with flexbox and tables, but I'm wondering if CSS offers a simpler method. Flexbox, tables and simple Javascript are acceptable alternatives.

height demo

width demo

解决方案

You can use CSS tables:

.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>

The horizontal case can also be achieved with floats:

#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>

这篇关于设置一个元素的长度（高度或宽度）减去另一个元素的可变长度，即calc（x-y），其中y是未知的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！