height:calc(100% - 10px)的用法 - 布局篇

已于 2023-09-11 14:35:05 修改
阅读量8.1k 收藏 9
点赞数 2
分类专栏： 样式集 文章标签： css3
于 2020-07-22 21:20:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anxin_wang/article/details/107523543
版权

下图demo所示，如何让一个侧边栏垂直方向全尺寸拉伸？
在这里插入图片描述

代码如下：

height:calc(100% - 10px)

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值 calc()的兼容性如下，使用时需注意：
在这里插入图片描述

悦涵仙子
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS实现等分布局的4种方式
09-27
主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下
前端笔试题-2020年2月27日.docx
03-14
- 使用浮动（float）：左侧元素`float:left`，右侧元素`float:right`，并设置`width: calc(100% - 200px)`。 - 使用Flexbox：容器设置`display:flex`，左侧子元素`flex: 0 0 200px`，右侧子元素`flex: 1`。 - ...
height:calc（）写法是什么意思
weixin_45549435的博客
05-08 2784
min-height:calc( 100vh - 64px ) calc计算 本身的100% 减去64px
height calc()函数 css中用100%的宽度/高度
qq_37916164的博客
04-01 9541
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：...
css高度100% - 100px与calc()函数
qq_30351747的博客
03-02 4301
css高度100% - 100px 描述 给一个盒子设置宽高，长度是100%加减一个像素值，一般height:100% - 100px;这样写是不会生效的。 解决 使用 calc()函数 calc()：这个函数就是用来计算长度值的，可以加减乘除一个像素值 height: calc(100% - 100px); 这样就可以了。 .........
解决height calc()不生效 - 含代码
草巾冒小子的博客
01-31 1068
【代码】解决height calc()不生效 - 含代码。
height calc()函数 css中用100%的宽度/高度
探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南，涵盖从基础到高级话题，旨在提升编程效率和技能。
11-05 2006
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：相对于视口的高度。视口被均分为100单位的vh 注意： 运算符前后都需要保留一个空格，例如：width: ..
height: calc(100vh - 100px)；
最新发布
fury的博客
09-30 2085
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
calc(100%)与我的全屏网站
huangsally的博客
12-17 2024
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？当我在一个项目中的样式表中看到它，而且知道它的作用时，我好像发现了宝一样，的确，它的存在可以让我在架构全屏网页时不再使用脚本来控制高度了。 calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“wi...
css height属性中的calc方法
imkaifan的博客
07-15 658
css height属性中的calc方法： 例如父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); 切结"+或-"两边要有空格 不然不生效
关于css计算宽度，高度的calc(100% - 24px)
qiaoqiaoBigBoss的博客
04-26 1735
css常用计算款高度的方法calc() 我们用height: calc(100% - 24px) 或height: calc(100vh - 24px) , 但是最终计算结果往往是 height: 76% 或 height: 76vh, 怎样解决呢 解决方法 height: clac(~'100% - 24px')
CSS3 calc()会计算属性详解
09-27
下面将详细介绍`calc()`的使用方法、兼容性、基本理论以及注意事项。 ### 使用方法 `calc()`函数的标准语法如下： ```css property: calc(expression); ``` 其中，`property`是需要计算的CSS属性，如`width`、`...
html左右布局示例代码
09-28
如果想要右侧栏紧贴右侧，可以使用`float: right`代替，或者使用更现代的布局方法，如Flexbox或Grid。 ```css .rightside { background: white; height: 100%; width: calc(100% - 200px); /* 更新宽度，以适应...
css让容器水平垂直居中的7种方式
09-27
margin-left: calc((100% - 100px) / 2); margin-top: calc((100% - 100px) / 2); } ``` 以上七种方法各有优缺点，应根据目标浏览器支持情况和项目需求选择合适的方法。在现代项目中，通常推荐使用Flexbox或CSS ...
CSS中calc()方法以及vh、vw单位
m0_56063262的博客
02-23 1841
使用“+”、“-”、“*” 和 “/”四则运算；也可以混合使用各种单位进行计算，如“height: calc(100vh - 44px - 49px)”错误写法： "height: calc(12%+5em)"“ * ”和 “ / ”可以没有空格。举个直观的例子，让大家感受说人话。+”和“-”计算的时候要加空格。expression是表达式。
css 分辨率响应式高度
朝花夕拾的博客
01-11 1239
csss有个calc计算属性 100vh代表视窗高度 100vh - 200px 在视窗基础上减去200px calc(100vh - 200px) 注意减号两边要加空格
CSS `height: calc(100vh)；` Vs `height: 100vh；`
Joey3的博客
09-22 2709
VHheight: 100vh;表示该元素的高度等于视口高度的 100%。 例如：height: 50vh; 如果您的屏幕高度为 1000 像素，则您的元素高度将等于 500 像素（1000 像素的 50%）。 CALCheight: calc(100% - 100px);将使用元素的值来计算元素的大小。 例如：height: calc(100% - 100px);如果您的屏幕高度为 1000 像素，则您的元素高度将等于 900 像素（1000 像素的 100% 减去 100 像素）。 实例..
calc()的巧妙使用
前端361
09-12 853
主要作用：css中计算(支持加减乘数 + - * /) 例子：width:calc(100%+2rem) 浏览器前缀： /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); /*Standard */ calc(); 浏览器兼容性：IE9+、FF4.0+、Chrome19+、Saf...
用css写一个品字布局
03-13
可以的，品字布局可以使用CSS的flexbox布局来实现。具体实现方法可以参考以下代码： HTML代码： ``` <div class="container"> <div class="header">头部</div> <div class="left">左侧</div> <div class="main">主体</div> <div class="right">右侧</div> <div class="footer">底部</div> </div> ``` CSS代码： ``` .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; } .header, .footer { width: 100%; height: 50px; background-color: #ccc; } .left, .right { width: 200px; height: calc(100% - 100px); background-color: #eee; } .main { flex: 1; height: calc(100% - 100px); background-color: #fff; } ``` 以上代码实现了一个简单的品字布局，其中头部和底部占据整个容器的宽度，左侧和右侧固定宽度，主体部分自适应宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值