100vh只在笔记本电脑上通过视口

Question

我想使用#conA作为英雄部分，并使#conA的高度填充整个视口(因此#conA高度：100vh(。它在平板电脑上工作正常，但在笔记本电脑上，#conA的高度看起来比视口占据的要多得多。

儿子在平板电脑上它看起来正确：在此处输入图像描述

但在笔记本电脑上，它看起来像：在此处输入图像描述(注意，我试着在#conA上加一个蓝色边框，它比视口高得多(

相反，我希望它看起来是这样的：在此处输入图像描述

有办法解决这个问题吗？

<section id="conA">
<div class="container">
<div id="heroText">
<div id="text-fixed">lorem ipsum</div>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>

#conA {
height: 100vh;
}

#conA .container {
margin-left: auto;
margin-right: auto;
display: block;
}

#heroText {
color: #56525E;
}

#conA #text {
display: inline;
}

@media (min-width: 600px) and (max-width: 959px) {
#conA .container {
width: 70%; 
}

#conA {
min-height: 800px;
position: relative;
}
#heroText {
line-height: 1.7;
font-size: 28px;
text-align: center;
position: absolute;
width: 70%;
top: 20%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#conA #images {
text-align: center;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
width: 90%;
}
#conA #images img{
width: 13em; 
height: auto;
}
}

Answer 1

感觉它比您提供的更多。然而，我的观察结果是这样的

1. 你已经为平板电脑视图定义了@media查询，所以你的身高：100vh不会影响平板电脑
2. 不要定义height:100vh，而是尝试使用max-height: 100vh。它会将你的#conA限制为100vh
3. 确保在标签中添加了<meta name="viewport" content="width=device-width, initial-scale=1.0">

最后，这在很大程度上取决于屏幕的类型。平板电脑的像素DPI(每英寸密度(可能与您的系统有很大不同。点击此处了解有关像素密度的更多信息：https://material.io/design/layout/pixel-density.html

Answer 2

你真的需要@media吗？这是您使用flexBox的简化代码。渲染是否如预期？

#conA {
height: 100vh;
border:blue 5px solid;
}
#conA .container {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#heroText {
background: red;
line-height: 1.7;
font-size: 28px;
text-align: center;
width: 70%;
margin-top:20vh;
}
#conA #images {
background: yellow;
text-align: center;
margin-top: 1em;
width: 100%;
}
#conA #images img{
width: 13em; 
height: auto;
}