设置一个元素的长度(高度或宽度)减去另一个元素的可变长度,即 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 和表格可以完成整个任务,但我想知道 CSS 是否提供了更简单的方法.Flexbox、表格和简单的 Javascript 是可接受的替代品.
您可以使用 CSS 表格:
.wrapper {显示:表;宽度:100%;边距:15px 0;}.horizontal.wrapper >div {显示:表格单元格;空白:nowrap;/* 防止换行 */边框:1px 实心;}.left { width: 100px }/* 最小宽度 100px */.center { 宽度:0;}/* 由内容给出的宽度 */.vertical.wrapper { 高度:200px;}.vertical.wrapper >div {显示:表格行;}.vertical.wrapper >div >跨度 {显示:表格单元格;边框:1px 实心;}.top { 高度:100px;}/* 最小高度为 100px */.middle { 高度:0;}/* 由内容给出的高度 */.bottom { 高度:100%;}/* 尽可能高*/
<div class="left">100px 宽</div><div class="center">自动宽度,由内容给出</div><div class="right">剩余空间</div><div class="垂直包装器"><div class="top"><span>100px 高</span></div><div class="middle"><span>自动高度,由内容给出</span></div><div class="bottom"><span>剩余空间</span></div>
水平情况也可以用浮动来实现:
#wrapper, .right { 溢出:隐藏;}/* 建立 BFC */#wrapper >div { 边框:1px 实心;}.left, .middle { 浮动:左;}.left { 宽度:100px }
<div class="left">100px</div><div class="middle">自动宽度,由内容给出</div><div class="right">剩余空间</div>
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.
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屋!