css3中的calc()不显示问题

发表于 | 分类于 |
字数统计: 341 | 阅读时长 ≈ 1

这个问题真的是个坑，calc写的表达式运算符两边要有空格

分享一道面试题：

1
2
3
4
5
6
7
8
<div class="container">
        <div class="t"></div> <!--高：100px-->
        <div class="c"> <!--高：浏览器高 - 200px-->
            <div class="l"></div>   <!--高：父级  宽：100px -->
            <div class="r"></div>   <!-- 高：父级  宽：浏览器的宽度 - 100px -->
        </div>
        <div class="f"></div>  <!-- 高：100px -->
</div>

开始有3个困惑：

  • 怎么获取浏览器高度和宽度
  • 怎么让子去继承父
  • css里面貌似不能写计算表达式

解决：

  • 不用获取，100vh就是高。

    • 100vh 与 100% 的区别

      当元素没有内容时，设置100%，该元素并不会被撑开，此时高度为0。

      设置100vh的话，不管有没有内容都会显示。

  • 计算表达式

    • 用calc

  • 子继承父？

布局：

  • 开始的时候，打算让l的宽width: 100px;然后r为100vw-100px,再让r去右浮

  • 然后，右边超了一点，-200px试试

  • 给中间的块加上display: flex

    成功了

  • 再加上margin: 0

更好了

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body{
    margin: 0;
}

.t{
    height: 100px;
    background-color: blanchedalmond;
}

.c{
    display: flex;
    height: calc(100vh - 200px) ;
    background-color: azure;
}

.l{
    background-color: brown;
    width: 100px;
    height: 100%;
}

.r{
    background-color: aquamarine;
    height: 100%;
    width: calc(100vw - 100px);
    float: right;
}

.f{
    height: 100px;
    background-color: blanchedalmond;
}