css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

最近项目遇到一个布局需求，头部高度固定，页面需要刚好占满一屏幕。

如下示意图：

方法：使用calc

.wrap{position: relative;margin-left: 24px;margin-right: 24px;min-height: calc(100% - 123px);
}

calc()说明：

css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。
calc()函数用于动态计算长度值。
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

特别注意：

这里是指高度100%的基础上减去123像素

- 号两边要有空格，否则不会生效。

转载于:https://www.cnblogs.com/baiyangyuanzi/p/6567862.html

css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏相关推荐

【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...
CSS3属性calc函数（CSS3）
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
【uniapp】CSS3 的 calc() 函数使用表达式动态计算
前言 css3 中增加了 calc() 函数 calc() 函数语法:property: calc(expression) expression 表达式为: "+". " ...
flex与grid响应式布局中的子容器为固定空间后的剩余空间，该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
java如何定义宽高_java – 将相对布局中的宽度和高度设置为百分比
我想这样:一个由2个箭头覆盖的ViewPager 我得到了我想要的代码.但是,我得到了lint的这些警告: >这种布局没用(对于虚拟布局) >嵌套权重对性能不利. 我想知道是否有更好的方法 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS3中的calc()函数以及在less中的使用
1. calc()函数在CSS3中我们可以通过calc()函数来动态计算长度值,如: #div {width: calc(100% - 100px); } 它的语法是 calc(expression ...

css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏相关推荐

最新文章

热门文章