css calc() 的使用方法,里面包含bug

简介: 在做后台管理系统的时候吗,我们通常会发现,左侧的菜单需要出去顶部后自动布满整个屏幕,并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。 但是用的不好的话,会发现没有作用。

在做后台管理系统的时候吗,我们通常会发现,左侧的菜单需要出去顶部后自动布满整个屏幕,并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。 但是用的不好的话,会发现没有作用。


如下图:


20200330124140541.png


代码如下图:


20200330124215235.png


检查后发现:calc(100% - 70px) 里面的100%,是回去找父级的高度,当我们设置body的时候为相对高度,那么则会去找html的高度。所以加上


html,body{
height: 100%;
width: 100%;
}


就可以啦! 记录一个小bug


20200330124421999.png

相关文章
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
174 0
|
Web App开发 前端开发 开发者
|
12月前
|
安全 前端开发 开发者
CSS3 中 calc()、constant() 和 env() 函数的使用指南
在现代网页设计中,CSS3 的 calc()、constant() 和 env() 函数为开发者提供了强大的工具,帮助实现灵活和响应式的布局。本文将深入探讨这三个函数的定义、用法以及最佳实践,特别是如何利用 calc() 进行动态计算、constant() 的历史背景,以及 env() 在处理设备安全区域中的应用。通过本文,读者将能够更好地理解并运用这些函数,提升网页设计的灵活性与用户体验。
482 0
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
183 0
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
474 0
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
151 1
|
前端开发 UED
CSS3媒体查询简介与使用方法
CSS3媒体查询简介与使用方法
105 0
|
编解码 前端开发 容器
CSS calc() 使用指南
CSS calc() 使用指南
CSS calc() 使用指南
|
前端开发 JavaScript 开发者
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.3 CSS 基础——2.3.1 CSS 的 3 种使用方法
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.3 CSS 基础——2.3.1 CSS 的 3 种使用方法
170 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式