对于模棱两可的标题感到抱歉,但我真的不知道如何用一句话来解释这个问题。 我用这个部分下载了一个bootstrap模板:
header.masthead {
position: relative;
width: 100%;
padding-top: 150px;
padding-bottom: 100px;
color: white;
background: url("../img/bg-pattern.png"), #00d8ff;
background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #3ba793, #0044ff);
background: url("../img/bg-pattern.png"), linear-gradient(to left, #3ba793, #0044ff);
}
header.masthead .header-content {
max-width: 500px;
margin-bottom: 100px;
text-align: center; }
header.masthead .header-content h1 {
font-size: 30px; }
header.masthead .device-container {
max-width: 325px;
margin-right: auto;
margin-left: auto; }
header.masthead .device-container .screen img {
border-radius: 3px; }
@media (min-width: 992px) {
header.masthead {
height: 100vh;
min-height: 775px;
padding-top: 0;
padding-bottom: 0; }
header.masthead .header-content {
margin-bottom: 0;
text-align: left; }
header.masthead .header-content h1 {
font-size: 50px; }
header.masthead .device-container {
max-width: 325px; } }

<header class="masthead">
<div class="container h-100">
<div class="row h-100">
<div class="col-lg-7 my-auto">
<div class="header-content mx-auto">
<h1 class="mb-5">SOME TEXT</h1>
<a href="#download" class="btn btn-outline btn-xl js-scroll-trigger">SOME TEXT</a>
</div>
</div>
<div class="col-lg-5 my-auto">
<!--SOMETHING TO ADD-->
</div>
</div>
</div>
</header>
&#13;
我使用1920x1080显示器测试了Chrome网站,一切都很好,<header>
高度非常完美,按F11全屏调整高度,但现在我用1366x768笔记本电脑和这不会发生。实际上只有F11 <header>
高度才好,而浏览器分辨率正常,它固定在1366x768,我不知道为什么。我尝试使用Chrome和Edge。
我希望你能解决这个问题,提前谢谢。