Web サイトのトップ ナビゲーション バーの outerHeight を計算のために取得しようとしていますが、Web ページの読み込み/再読み込み時に完全に機能します。ただし、Chrome デベロッパー ツールで画面の向きを横向きに変更すると、間違った高さが返されます。私のコードは、outerHeight を取得する前にサイズ変更イベントをリッスンするため、Web ページの向きの変更時に間違った高さを返すのに、Web ページの読み込み/再読み込み時に正しい高さを返す理由がわかりません。resize方向の変更後にページが完全に読み込まれるのをリスナーが待機していないことに関係していると思われますが、よくわかりません。
コード スニペットについては、Bootstrap 4.5 を追加しようとしましたが、エラーが返され続けました。誰かがその方法を知っている人にそれを追加したい場合は、コードスニペットを実行するときにそのページがより正確になるように、それを大いに感謝します.
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>