100vh 仅在笔记本电脑上越过视口

Question

I'd like to use #conA as a hero section and have #conA's height to fill the entire viewport (so #conA height:100vh). It's working correctly on tablet, but on laptop, it looks like #conA's height takes up much more than viewport.

Son on tablet it looks correctly: enter image description here

But on laptop, it looks like: enter image description here (note that I tried putting a blue border to #conA, and it's way taller than viewport)

What I'd like it to look like instead is this: enter image description here

Is there a way to fix this?

<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

It feels like there is more to it than you have provided. However, my observations are as such

1. You have @media queries defined for tablet view, so your height:100vh is not affecting it on tablets.
2. Instead of defining height:100vh try using max-height: 100vh . It would limit your #conA to 100vh only.
3. Make sure you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> added inside your tag.

Finally, it very much depends on type of screen. The Pixel DPI (density per inch) for your Tablet may be something very different from your system. Read more about Pixel density here: https://material.io/design/layout/pixel-density.html

Answer 2

do you really need a @media? here is your simplified code with flexBox. is the rendering as expected?

#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;
}