我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:
怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......
任何人都可以帮我/建议一个CSS解决方案吗？
简单的测试代码:
/* maybe i can track the issue whe it occours... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})*{ margin:0; padding:0; }
/*
this is the box which should keep constant the height...
min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
min-height:100vh;
position:relative;
}
.vhbox .t{
display:table;
position:relative;
width:100%;
height:100vh;
}
.vhbox .c{ …我刚刚了解了一个新的,不常见的CSS单元.vh并分别vw测量视口高度和宽度的百分比.
我从Stack Overflow看了这个问题,但它使单位看起来更相似.
答案具体说明了
vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%等.
这看起来与%单位完全相同,这更常见.
在Developer Tools中,我尝试将值从vw/vh更改为%而反之亦然,并获得相同的结果.
这两者有区别吗？如果没有,为什么要引入这些新单位CSS3？
我想使用指定我的字体大小vw,如
font-size: 3vw;
但是,我还想将字体大小限制为36px.如何才能实现max-font-size不存在的等价物- 是使用媒体查询的唯一选择？
如标题中所述,是否可以vw仅在css中计算没有滚动条的情况？
例如,我的屏幕宽度为1920px.vw回来1920px,太好了.但我的实际身体宽度只是像1903px.
有没有办法让我1903px只用css 检索值(不仅是直接的孩子body),还是我绝对需要JavaScript呢？
从我在其他 答案中看到的,CSS视口单元还不能在calc()语句中使用.我想要实现的是以下声明:
height: calc(100vh - 75vw)
是否有一些解决方法我可以使用纯CSS实现这一点,即使视口单元不能在calc()语句中使用？或者只是CSS和HTML？我知道我可以使用javascript动态地完成它,但我更喜欢CSS.
我使用100vh垂直居中div与行高.这个网站支持vh和vw在70%左右,这是一个公平的评估吗？您是否建议在构建网站时使用视口单元？我知道这有点主观,我只是寻找更有经验的网络开发人员的意见而不是我.
编辑:感谢大家的投入,我确实希望它在移动设备上看起来不错,所以我想我不得不放弃vh.
我正在尝试使用基于flexbox的布局来为我的页面获取粘性页脚.这适用于Chrome和Firefox,但在IE11中,页脚位于我的主要内容之后.换句话说,主要内容没有拉伸以填充所有可用空间.
这里的例子 - http://jsfiddle.net/ritchieallen/3tpuryso/
HTML:
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}CSS:
<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>在IE中 - 当容器高度单位以vh为单位测量时,如何在flex布局中获取主元素？我想看看这个行为是否是IE实现flexbox规范的方式中的错误的结果,但我在其他地方找不到任何提及此问题的方法.
任何人都可以解释回退如何在CSS中工作？我试图为vh和vw设置它,显然我没有得到它...
这是我尝试的解决方案,但不起作用.每次都会获取高度属性.
CSS:
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
新的vw(和vh,vmin和vmax)CSS单元非常有用calc.两者都在Chrome中工作正常(后者作为前缀-webkit-calc),但由于某种原因,我发现calc属性值包括v*单位,例如width: -webkit-calc(95vw - 25em)产生无效的属性值.这还没有实现,还是规范或错误？
我正在使用水平滚动条进行页面布局.我有一些水平顺序固定宽度的面板,它们都应该具有视口高度.我决定测试一下这个vh单元.
.panel { height: 100vh; }
这工作正常,直到我得到一个滚动条.问题是,vh忽略滚动条使用的高度,因此添加了一个垂直滚动条.
我想从测量结果中减去滚动条的高度vh; 有没有办法做到这一点？