Question

假设<div>标记位于父<div>标记中。父标签占据了屏幕的一定部分;我希望子标记的width和height标记是这样的：width: 100% - 100px;，这样无论浏览器窗口如何，子标记和父标记之间的差距始终保持不变大小

以下代码是我正在处理的内容。

<div class="outer">
    <div class="middle">
        <div class="inner">

        </div>
    </div>
</div>

这是我放入的CSS样式。它适用于注释的宽度和高度属性，但100% - 100px只隐藏.inner选择器。

.outer {
    display: table;
    position: relative;
    height: 84%;
    width: 100%;}

.middle {
    display: table-cell;
    vertical-align: middle;}

.inner {
    animation-duration: 3s;
    animation-name: mainbox;
    animation-iteration-count: 1;

    margin-left: auto;
    margin-right: auto; 
    width: 100% - 100px;//90%
    height: 100% - 100px;//80%
    background: rgba(0, 0, 0, 0.25);
}

@keyframes mainbox{
    from{
        background: rgba(0, 0, 0, 0);
        height: 0%;
    }

    to{
        background: rgba(0, 0, 0, 0.25);
        height: 100% - 100px;//80%
    }
}

如何以我想要的方式设置差距？

Answer 1

是的，你可以。在CSS中使用标准calc() function。请注意它目前的浏览器支持，尽管它在这一点上非常好。

.class {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
}

如果您使用LESS或SASS等预处理器，这也可以。

我可以将<div>的宽度或高度设置为减去一定百分比吗？

1 个答案: