[英]Alternative to 100vh for fixed positioned element?
I have a div (top navigation)
that is nested inside a flex
container. 我有一个嵌套在
flex
容器中的div (top navigation)
。 When the top-nav
expands, I want it to occupy the full height of the viewport. 当
top-nav
扩展时,我希望它占据视口的整个高度。 I know this can be achieved by setting a height of 100vh
but it is not widely supported. 我知道可以通过将高度设置为
100vh
来实现,但并未得到广泛支持。 So, I need a more traditional way to achieve this. 因此,我需要一种更传统的方式来实现这一目标。
The html
and body
have a height 100%
but the content of the view overflows and I can scroll the page. html
和body
的height 100%
但是视图的内容溢出了,我可以滚动页面。
What I have right now is: 我现在所拥有的是:
.top-nav .top-nav-links-wrapper {
position: fixed;
width: 100%;
background-color: #fff;
top: 50px;
left: 0;
height: 100%;
}
Is there a way to achieve this (apart from setting height to 100vh
)? 有没有办法做到这一点(除了将height设置为
100vh
)?
Viewport units like vh
and vw
are well supported ; vh
和vw
等视口单元得到了很好的支持 ; Use them. 使用它们。
The other alternative is to set the position to fixed
and set bottom: 0
. 另一种选择是将位置设置为
fixed
并设置bottom: 0
。 height
assumes the height of the parent element and doesn't take position, margin or padding into account; height
假定父元素的高度,并且不考虑位置,边距或填充; bottom
assumes an offset from the bottom of the parent container. bottom
假定从父容器的底部偏移。 Same goes for width
vs right
. width
vs right
。 Remember, you should not use height
and bottom
at the same time or they'll override each other. 请记住,您不应同时使用
height
和bottom
,否则它们会相互覆盖。
Here is a working example. 这是一个工作示例。
.fullscreen { position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: cornflowerblue; } .body { height: 2000px; }
<div class="fullscreen">this will be fullscreen with a top offset</div> <div class="body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p> </div>
Regardless of which units you use, the page is always going to be able to scroll behind the expanded nav. 无论使用哪种单位,页面始终可以在展开的导航后滚动。 This shouldn't be a problem if your navbar is also given a fixed position so it can follow along.
如果您的导航栏也具有固定位置,那么它就可以跟随前进,这应该不是问题。
Strongly recommend against using vw
/ vh
in web pages. 强烈建议不要在网页中使用
vw
/ vh
。 They are very poorly supported by Safari, especially with the notch for iPhoneX*. Safari对它们的支持非常差,尤其是对于iPhoneX *而言。
The other answer provided a solid alternative, using position
, top
, right
, bottom
and left
. 另一个答案提供了一个可靠的选择,使用
position
, top
, right
, bottom
和left
。
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
will take up 100% of the first ancestor with a position other than the default, static
. 将使用默认位置
static
之外的其他位置占据第一祖先的100%。
using position: fixed
will make it take up the whole layout viewport. 使用
position: fixed
将占据整个布局视口。
When you have the notch on iPhoneX, 100vw includes the notch in its measurement for iOS Safari even when your DOM does not include it. 如果您在iPhoneX上使用了该标记,则100vw会在iOS Safari的度量标准中包含该标记,即使您的DOM不包含该标记。
100vh is not what you expect it to be on iOS Safari (it's a bit more than 100 viewport height). 100vh不是您在iOS Safari上所期望的(它的视口高度略高于100)。
window.innerHeight/Width
and document.documentElement.clientHeight/Width
are another consistency nightmare in Safari, but that's a topic for another day. window.innerHeight/Width
和document.documentElement.clientHeight/Width
是Safari中的另一个一致性梦night,但这又是一个话题。
I work on one of those billion user website, and had to banned my team from using vw
/ vh
in our code for this reason. 我在一个拥有十亿用户的网站上工作,因此不得不禁止我的团队在我们的代码中使用
vw
/ vh
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.