【发布时间】：2020-10-10 04:26:23
【问题描述】：
我正在尝试在我的网站上获取顶部导航栏的 outerHeight 以进行一些计算，它在加载/重新加载网页时效果很好。但是，当我将 Chrome 开发人员工具中的屏幕方向更改为横向时，它会返回错误的高度。我的代码在获取 outerHeight 之前侦听调整大小更改事件，所以我不确定为什么它在网页的方向更改时返回错误的高度，但在加载/重新加载网页时返回正确的高度。我认为这可能与 resize 侦听器在方向更改后没有等待页面完全加载有关，但我不确定。
对于代码 sn-p，我尝试将 Bootstrap 4.5 添加到其中，但它一直返回错误。如果有人想在谁知道该怎么做中添加它，那将不胜感激，以便在运行代码 sn-p 时该页面更加准确。
body {
background-position: center center;
background-size: auto;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
color: white;
}
a:hover {
text-decoration: none;
color: white;
}
#content-wrapper {
overflow-y: scroll;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#content-wrapper::-webkit-scrollbar {
display: none;
}
#top_navbar {
padding: 0;
}
.navbar-brand {
padding: 0;
}
#navbar_logo {
width: 15vw;
margin-right: 6vw;
margin-left: 0 !important;
}
.nav-link {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vw;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #1b1b1b;
letter-spacing: 1px;
}
.nav-link:hover {
-webkit-text-fill-color: #1b1b1b;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.nav-item {
margin-left: 3vw;
margin-right: 3vw;
}
#bottom_footer,
#legal_documents {
background-color: #1b1b1b;
width: 100%;
position: absolute;
display: table;
bottom: 0;
text-align: center;
padding-top: 1%;
padding-bottom: .4%;
}
#legal_documents {
bottom: unset;
font-size: 10px;
padding-bottom: .6% !important;
}
#social_buttons::selection {
color: none;
background: none;
}
#social_buttons::-moz-selection {
color: none;
background: none;
}
#social_buttons a {
display: inline-block;
margin: 0 15px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
#bottom_footer a:hover,
#legal_documents a:hover {
opacity: 0.5;
}<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
<a class="navbar-brand" href="" title="Melo Relo">
<img id="navbar_logo" src="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar_items">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
</ul>
</div>
</nav>
<main id="content-wrapper" class="container-fluid">
</main>
<div id="bottom_footer">
<div id="social_buttons">
<a href="" class="facebook" title="Facebook" target="_blank"></a>
<a href="" class="twitter" title="Twitter" target="_blank"></a>
<a href="" class="instagram" title="Instagram" target="_blank"></a>
<a href="" class="snapchat" title="Snapchat" target="_blank"></a>
<a href="" class="youtube" title="YouTube" target="_blank"></a>
</div>
<div id="legal_documents">
<a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
<a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
</div>
</div>
</body>
</html>【问题讨论】：
标签： javascript jquery screen-orientation orientation-changes outerheight