美文网首页
css calc()不起作用

css calc()不起作用

作者: 有一个程序媛 | 来源:发表于2021-07-15 17:26 被阅读0次

calc函数运用最多的场景就是css设置百分比之后需要机上或者减去一些固定长度,比如后台管理系统的左侧菜单栏,高度100%但是需要减去最上方的logo,系统名称的高度什么的,应该是最常见的运用calc计算属性设置高度。

height: calc(100%-50px);

这个写法不会生效,原因可能有两个:

1.运算符前后需要加上空格

    正确写法是 height: calc(100% - 50px);

2.父容器需要设置高度才能生效

    如果按照1的写法还是无法设置div高度,原因可能就是父容器没有设置高度,这个算法一定要在父容器有高度的情况下才能生效。

相关文章

  • css calc()不起作用

    calc函数运用最多的场景就是css设置百分比之后需要机上或者减去一些固定长度,比如后台管理系统的左侧菜单栏,高度...

  • [译]calc()是如何工作的

    译自How calc() Works - written by Ire Aderinokun CSS3的calc(...

  • 30秒 学懂 css(二)

    计算属性calc() 函数calc()支持CSS3; 让你的CSS具有计算功能, CSS属性值就是表达式的结果 h...

  • CSS3之calc()

    一、calc()是什么 calc是英文单词calculate(计算)的缩写,是css3新增的功能,calc() 函...

  • css calc()

    常用场景 1.元素绝对定位居中显示 .foo { position: absolute; to...

  • css3 calc()

    什么是calc() calc是英文单词calculate(计算)的缩写,calc()是css3的一个新增的功能,用...

  • 底部固定

    使用calc()方法 HTML部分 css部分 查看链接

  • calc的用法

    CSS计算属性(calc):(智能数学运算规则)

  • 2018-07-18 css3 calc

    https://www.w3cplus.com/css3/how-to-use-css3-calc-functio...

  • 面试总结

    css position、float、BFC、flexbox、css3常用属性等、calc的应用 JS funct...

网友评论

      本文标题:css calc()不起作用

      本文链接:https://www.haomeiwen.com/subject/jwroultx.html