我正在开发一个我正在开发的页面的问题;似乎我的JavaScript文件生成的CSS不一致。它似乎只是关于div的放置（使用计算值）和几个其他div的高度（也使用计算值）的CSS。
在我部署到托管服务进行持续开发测试之前，这不是问题。换句话说，在我的本地计算机上，问题是不可重现的。
我不得不刷新页面多达40次以重现问题，但它发生了......
不一致的行为与<article class="betterThings">的位置有关。展示位置由JS计算，似乎JS并不总是正确计算$('.header').outerHeight()。同样，它大部分时间都有效，但并非总是如此。我还应该指出到目前为止我只能在Chrome中重现。
代码在这里：
var navTop;
var windowHeight;
var belowHeader;
var tallestHomeDiv;
var orientation = window.orientation;
$('document').ready(function() {
navTop = $('.header').outerHeight(true);
windowHeight = $(window).height();
belowHeader = ((windowHeight - (navTop + 50)));
tallestHomeDiv = $('.dislike').outerHeight(true);
placeElements();
stickyNav();
showBetterThings();
});
function stickyNav() {
$('.navbar').affix({offset: {top: navTop} });
}
function placeElements() {
$('article.betterThings').css('position', 'absolute');
$('article.betterThings').css('top', belowHeader / 2);
$('article.betterThings').css('transform', 'translateY(-50%)');
$('article.balance').css('margin-top', belowHeader);
$('article.balance').css('height', tallestHomeDiv);
$('article.busy').css('margin-top', belowHeader);
$('article.busy').css('height', tallestHomeDiv);
$('article.dislike').css('margin-top', belowHeader);
}
function showBetterThings() {
$('article.betterThings').addClass('show');
}/****************************************
GLOBAL STYLES
****************************************/
/*=-=-=-=-=-=-= header =-=-=-=-=-=-=-=-=*/
.header {
background-color: #323232;
}
.fullLogo {
padding: 1%;
margin: 0 auto;
}
/*=-=-=-=-=-=-= navigation -=-=-=-=-=-=-=*/
.navCont {
min-height: 50px;
}
.navbar {
border-radius: 0;
margin: 0;
background-color: #316924;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar.affix {
top: 0;
width: 100%;
z-index: 100;
background-color: #323232;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #323232;
}
.navbar.affix > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #316924;
}
.houseLogo {
height: 45px;
margin-top: -13px;
}
/*=-=-=-=-=-=-=-=- body =-=-=-=-=-=-=-=-=*/
section.content {
}
h1.home, h2.home {
font-family: 'Kaushan Script', cursive;
color: #b30047;
text-align: center;
}
p.home {
color: #5dd9d5;
}
a.home.scroll {
color: #b30047;
font-size: .75em;
}
article.home {
background-color: rgba(0, 0, 0, .5);
font-size: 1.25em;
padding: 25px;
border-radius: 10px;
}
article.betterThings {
margin-right: 8.33333%;
text-align: center;
opacity: 0;
}
article.betterThings.show {
opacity: 1;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
div.first {
padding-left: 0;
}
div.last {
padding-right: 0;
}
.homeBackVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
opacity: 0.5;
}
.content {
height: 1000px;
}
.aside {
}
/*=-=-=-=-=-=-=-= footer -=-=-=-=-=-=-=-=*/
.footer {
background-color: black;
width: 100%;
margin-top: 50px;
padding: 0;
}
.footerContact {
margin: 15px;
height: 2em;
}
/*****************************************
MEDIA QUERIES
******************************************/
/*=-=-=-=-=-= for mobile only =-=-=-=-=-=*/
@media only screen and (max-width: 767px) {
.navbar > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 0;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
.navbar.affix > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 1;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
}
/*=-=-=-=-=-for tablet and below=-=-=-=-=*/
@media only screen and (max-width: 991px) {
div.first, div.middle, div.last {
padding: 0;
}
article.busy, article.dislike {
margin-top: 25px !important;
}
}
/*=-=-=-=-=-= for tablet only =-=-=-=-=-=*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*=-=-=-=-= for tablet and above =-=-=-=-*/
@media only screen and (min-width: 768px) {
.navbar > div.container-fluid > div.navbar-header {
width: 0;
overflow: hidden;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.navbar.affix > div.container-fluid > div.navbar-header {
padding: 0px;
width: 190px;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
}
/*=-=-=-=-=- for desktop only =-=-=-=-=-=*/
@media only screen and (min-width: 992px) {
h1.home {
font-size: 3em;
margin-bottom: .75em;
}
}<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="./scripts/kelliKlean.js"></script>
</head>
<body>
<div class="container-fluid mainContainer">
<!--=-= HEADER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<header class="header col-xs-12">
<img class="img-responsive fullLogo" src="./resources/fullLogo.png" alt="full logo"/>
</header>
</div>
<!--=-= NAV BAR -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row navCont">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive houseLogo" src="./resources/navLogo.png" alt="full logo"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-usd"></span> Quote</a></li>
<li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Map</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--=-= CONTENT -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<!---- backgroung video --------------------------------------------------------------------->
<video loop muted autoplay class="homeBackVideo">
<source src="./resources/beach.mp4" type="video/mp4">
</video>
<section class="content col-xs-12">
<div class="row">
<article class="home betterThings col-xs-10 col-xs-offset-1">
<h1 class="home">Because you have better things to do!</h1>
<p class="home">Wouldn't you rather drive to the beach and spend your Saturday basking in the warmth
of the sun and cooling off in the shallow, salty water of the Gulf instead of cleaning
your home? Life is short, enjoy it!</p>
<a class="home scroll btn btn-default" href="#">Scroll Down<br>
<span class="home glyphicon glyphicon-menu-down"></span>
</a>
</article>
</div>
<div class="row">
<div class="first col-xs-10 col-xs-offset-1 col-md-3">
<article class="home balance">
<img class="balance img-responsive" src="./resources/balance.jpg"/>
<h2 class="home balance">It's All About Balance</h2>
<p class="home">After a long day at work, the last thing you want to worry about is cleaning your
home, not to mention that it depletes valuable time that you could be enjoying other activities.
Even if you don't need a daily housekeeper, having a scheduled cleaning a couple times a month
will help balance the scales between work and life. Remember, we work to live, we don't live to
work!</p>
</article>
</div>
<div class="middle col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-4">
<article class="home busy">
<img class="busy img-responsive" src="./resources/busy.jpg"/>
<h2 class="home busy">Who Has the Time?</h2>
<p class="home">If your schedule is already packed full, finding the time to clean is never easy.
Between dropping the kids off, driving to work, cooking dinner, and walking the dog, who has
the time to clean? Studies have shown conflict among busy families can often come from the
stress of finding (or spending) time to clean. Hiring a housekeeper can help lower your stress
level by allowing you to fit in everything else your busy days have to offer. </p>
</article>
</div>
<div class="last col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-3">
<article class="home dislike">
<img class="balance img-responsive" src="./resources/dislike.jpg"/>
<h2 class="home balance">Please NO!</h2>
<p class="home">If you are like most people, in lieu of cleaning you would rather be doing... well,
anything! Let's face it: cleaning is not the most desirable way to spend your time. Also, some people
are just better at cleaning that others. If it takes you hours to clean your home and you hate every
minute of it, why not hire someone that would do it faster so you can devote your time to
whatever it is you would rather be doing?</p>
</article>
</div>
</div>
<!--=-= FOOTER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<footer class="footer col-xs-12">
<img class="footerContact" src="./resources/facebook.png"/>
<img class="footerContact" src="./resources/email.png"/>
<img class="footerContact" src="./resources/call.png"/>
</footer>
</div>
</section>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
在我看来，问题是你的代码用于检索最高div的高度发生在页面上的图像被加载之前，使得最高div非常低。
可以通过在window.load而不是document.ready上执行代码来解决，但请考虑一个更优雅的解决方案（如果bootstrap不支持，我会尝试查找）
答案 1 :(得分：0)
正如Jakub建议的那样，我研究了boostrap功能来支持我想要实现的目标。事实证明，在bootstrap中使用内置的.card类将实现我想要的。我可以创建一个卡片组，它们都具有相同的高度，并且无需在javascript中动态计算值。