当前位置: 首页 > 面试题库 >

CSS Calc视口单位的解决方法?

伯俊弼
2023-03-14
问题内容

根据我在其他答案中看到的内容,CSS视口单位还不能在calc()语句中使用。我想实现以下语句:

height: calc(100vh - 75vw)

即使不能在语句中使用视口单元,也有一些变通办法可以 使用纯CSS
来实现此目的calc()吗?还是只是CSS和HTML?我知道我可以使用javascript动态地做到这一点,但我更喜欢CSS。


问题答案:

在我回答这个问题之前,我想指出一下,Chrome和IE 10+实际上支持带视口单位的计算。

FIDDLE) (在IE10 +中)

解决方案(对于其他浏览器):调整大小

1)首先将高度设为100vh。

2)将box-sizing设置为border-box-添加75vw的padding-top。这意味着填充将是内部高度的一部分。

3)只需将多余的padding-top抵消为负的margin-top-top

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}


 类似资料:
  • 问题内容: 我有一个事件表,其中包含以下字段: 给定一个持续时间和一个数字,我需要在持续时间的任何相对时间窗口中,对所有大于事件的事件进行计数。这基本上需要针对每个事件的滑动窗口。例如,我希望所有event_type在10分钟的持续时间内具有超过5个事件的活动。 我不确定如何在没有窗口功能的情况下解决此问题。 (我使用的是mysql 5.6。我在说的是一百万行以下的数据集。) 问题答案: MySQ

  • 我正在Bootstrap中创建一个简单的单页布局,但是我正在为大屏幕和移动设备上的div的背景颜色而苦苦挣扎。当在大屏幕上时,div的尺寸是100VW宽和100VH高--这一切都很好。问题是,当我向下缩放视口时,div的所有内容下面没有所需的颜色,内容溢出到第一个div下面的第二个div中。 我怎样才能使div的所有内容下面都有一种颜色,不管视区大小是多少?(宽度或高度的100%没有帮助,有边框在

  • 本文向大家介绍Swift解决UITableView空数据视图问题的简单方法,包括了Swift解决UITableView空数据视图问题的简单方法的使用技巧和注意事项,需要的朋友参考一下 前言 UITableView在现如今的APP中已经成为必不可少的一个控件,所以今天给大家带来UITableView在Swift中是如何实现的,下面这篇文章主要给大家介绍了关于Swift解决UITableView空数据

  • 问题内容: 我们有一个给定的REST接口: 可以根据服务器配置,通过不同的逻辑“计算器”来实现此计算。 现在,我们正在设计每个计算器必须实现的Java接口。该接口将为每个REST服务提供一个方法。 鉴于所有REST(和HTTP)调用都是无状态的,因此每个方法都应该是静态的。但是,您不能在Java接口中定义静态方法。有没有针对这种情况的好的解决方法? 我们可以将这些方法定义为非静态方法,然后仅创建一

  • 本文向大家介绍IDEA 端口占用的解决方法(推荐),包括了IDEA 端口占用的解决方法(推荐)的使用技巧和注意事项,需要的朋友参考一下 IDEA 端口占用解决方法 后台开发时经常遇到端口占用问题 Intellij IDEA端口占用 解决方法: 方法1: 打开任务管理器,关闭java 进程; 方法2: 修改端口号的方法可解决 方法3(通用型方法) 附录:使用idea windows端口占用解决 解决

  • 本文向大家介绍bootstrap datetimepicker控件位置异常的解决方法,包括了bootstrap datetimepicker控件位置异常的解决方法的使用技巧和注意事项,需要的朋友参考一下 今天在写毕设的时候,用到了bootstrap-datetimepicker作为日期控件。 在git上clone下最新的代码,运行demo,发现控件区域整体下移1000px左右。 作为一个准备拿来就