1
開発中のページに問題があります。私のJavaScriptファイルによって生成されているCSSが矛盾しているようです。 div（計算された値を使用）と他のdivの高さ（計算された値を使用）の配置に関してはCSSだけと思われます。JavaScriptで一貫性のない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() {
\t navTop = $('.header').outerHeight(true);
\t windowHeight = $(window).height();
\t belowHeader = ((windowHeight - (navTop + 50)));
\t tallestHomeDiv = $('.dislike').outerHeight(true);
\t placeElements();
\t stickyNav();
\t
\t showBetterThings();
});
function stickyNav() {
\t $('.navbar').affix({offset: {top: navTop} });
}
function placeElements() {
\t $('article.betterThings').css('position', 'absolute');
\t $('article.betterThings').css('top', belowHeader/2);
\t $('article.betterThings').css('transform', 'translateY(-50%)');
\t
\t $('article.balance').css('margin-top', belowHeader);
\t $('article.balance').css('height', tallestHomeDiv);
\t
\t $('article.busy').css('margin-top', belowHeader);
\t $('article.busy').css('height', tallestHomeDiv);
\t
\t $('article.dislike').css('margin-top', belowHeader);
}
function showBetterThings() {
\t \t $('article.betterThings').addClass('show');
\t
}/****************************************
\t \t \t GLOBAL STYLES
****************************************/
/*=-=-=-=-=-=-= header =-=-=-=-=-=-=-=-=*/
.header {
\t background-color: #323232;
}
.fullLogo {
\t padding: 1%;
\t margin: 0 auto;
}
/*=-=-=-=-=-=-= navigation -=-=-=-=-=-=-=*/ \t
.navCont {
\t min-height: 50px;
}
.navbar {
\t border-radius: 0;
\t margin: 0;
\t background-color: #316924;
\t -webkit-transition: all 1s ease-in;
\t \t -moz-transition: all 1.5s ease-in;
\t \t \t -ms-transition: all 1.5s ease-in;
\t \t \t -o-transition: all 1.5s ease-in;
\t \t \t \t transition: all 1.5s ease-in;
}
.navbar.affix {
\t top: 0;
\t width: 100%;
\t z-index: 100;
\t background-color: #323232;
\t -webkit-transition: all 1.5s ease-in;
\t -moz-transition: all 1.5s ease-in;
\t -ms-transition: all 1.5s ease-in;
\t -o-transition: all 1.5s ease-in;
\t transition: all 1.5s ease-in;
\t
}
.navbar > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
\t background-color: #323232;
}
.navbar.affix > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
\t background-color: #316924;
}
.houseLogo {
\t height: 45px;
\t margin-top: -13px;
}
\t \t
/*=-=-=-=-=-=-=-=- body =-=-=-=-=-=-=-=-=*/
section.content {
}
h1.home, h2.home {
\t font-family: 'Kaushan Script', cursive;
\t color: #b30047;
\t text-align: center;
}
p.home {
\t color: #5dd9d5;
}
a.home.scroll {
\t color: #b30047;
\t font-size: .75em;
}
article.home {
\t background-color: rgba(0, 0, 0, .5);
\t font-size: 1.25em;
\t padding: 25px;
\t border-radius: 10px;
}
article.betterThings {
\t margin-right: 8.33333%;
\t text-align: center;
\t opacity: 0;
}
article.betterThings.show {
\t opacity: 1;
\t -webkit-transition: opacity 5s ease-in-out;
\t -moz-transition: opacity 5s ease-in-out;
\t -ms-transition: opacity 5s ease-in-out;
\t -o-transition: opacity 5s ease-in-out;
\t transition: opacity 5s ease-in-out;
}
div.first {
\t padding-left: 0;
}
div.last {
\t padding-right: 0;
}
.homeBackVideo {
\t position: fixed;
\t top: 50%;
\t left: 50%;
\t min-width: 100%;
\t min-height: 100%;
\t width: auto;
\t height: auto;
\t z-index: -100;
\t transform: translateX(-50%) translateY(-50%);
\t opacity: 0.5;
}
.content {
\t height: 1000px;
}
.aside {
}
/*=-=-=-=-=-=-=-= footer -=-=-=-=-=-=-=-=*/
.footer {
\t background-color: black;
\t width: 100%;
\t margin-top: 50px;
\t padding: 0;
}
.footerContact {
\t margin: 15px;
\t height: 2em;
}
/*****************************************
\t \t \t MEDIA QUERIES
******************************************/
\t \t \t
/*=-=-=-=-=-= for mobile only =-=-=-=-=-=*/
@media only screen and (max-width: 767px) {
\t .navbar > div.container-fluid > div.navbar-header > a.navbar-brand {
\t \t opacity: 0;
\t \t -webkit-transition: all 0.75s ease-in;
\t \t -moz-transition: all 0.75s ease-in;
\t \t \t -ms-transition: all 0.75s ease-in;
\t \t \t -o-transition: all 0.75s ease-in;
\t \t \t \t transition: all 0.75s ease-in;
\t }
\t
\t .navbar.affix > div.container-fluid > div.navbar-header > a.navbar-brand {
\t \t opacity: 1;
\t \t -webkit-transition: all 0.75s ease-in;
\t \t -moz-transition: all 0.75s ease-in;
\t \t \t -ms-transition: all 0.75s ease-in;
\t \t \t -o-transition: all 0.75s ease-in;
\t \t \t \t transition: all 0.75s ease-in;
\t }
}
/*=-=-=-=-=-for tablet and below=-=-=-=-=*/
@media only screen and (max-width: 991px) {
\t div.first, div.middle, div.last {
\t \t padding: 0;
\t }
\t
\t article.busy, article.dislike {
\t \t margin-top: 25px !important;
\t }
}
/*=-=-=-=-=-= 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) {
\t .navbar > div.container-fluid > div.navbar-header {
\t \t width: 0;
\t \t overflow: hidden;
\t \t -webkit-transition: all 0.75s ease-in-out;
\t \t -moz-transition: all 0.75s ease-in-out;
\t \t \t -ms-transition: all 0.75s ease-in-out;
\t \t \t -o-transition: all 0.75s ease-in-out;
\t \t \t \t transition: all 0.75s ease-in-out;
\t }
\t .navbar.affix > div.container-fluid > div.navbar-header {
\t \t padding: 0px;
\t \t width: 190px;
\t \t -webkit-transition: all 0.75s ease-in-out;
\t \t -moz-transition: all 0.75s ease-in-out;
\t \t \t -ms-transition: all 0.75s ease-in-out;
\t \t \t -o-transition: all 0.75s ease-in-out;
\t \t \t \t transition: all 0.75s ease-in-out;
\t }
}
/*=-=-=-=-=- for desktop only =-=-=-=-=-=*/
@media only screen and (min-width: 992px) {
\t h1.home {
\t \t font-size: 3em;
\t \t margin-bottom: .75em;
\t }
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>
\t \t </title>
\t \t <meta charset="utf-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
\t \t <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
\t \t <link rel="stylesheet" href="./css/styles.css">
\t \t <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
\t \t <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t \t <script defer src="./scripts/kelliKlean.js"></script>
\t </head>
\t <body>
\t
\t \t <div class="container-fluid mainContainer">
\t \t
\t \t \t <!--=-= HEADER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
\t \t \t <div class="row">
\t \t \t \t <header class="header col-xs-12">
\t \t \t \t \t <img class="img-responsive fullLogo" src="./resources/fullLogo.png" alt="full logo"/>
\t \t \t \t </header>
\t \t \t </div>
\t \t \t
\t \t \t <!--=-= NAV BAR -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
\t \t \t <div class="row navCont">
\t \t \t
\t \t \t \t <nav class="navbar navbar-inverse">
\t \t \t \t \t <div class="container-fluid">
\t \t \t \t \t \t <div class="navbar-header">
\t \t \t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
\t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t <a class="navbar-brand" href="#"><img class="img-responsive houseLogo" src="./resources/navLogo.png" alt="full logo"/></a>
\t \t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t \t <div class="collapse navbar-collapse" id="myNavbar">
\t \t \t \t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t \t \t \t <li class="active"><a href="#">Home</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Page 1</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Page 2</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Page 3</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-usd"></span> Quote</a></li>
\t \t \t \t \t \t \t \t <li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Map</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </nav>
\t \t \t \t
\t \t \t </div>
\t \t \t
\t \t \t <!--=-= CONTENT -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
\t \t \t <div class="row">
\t \t \t \t <!---- backgroung video --------------------------------------------------------------------->
\t \t \t \t <video loop muted autoplay class="homeBackVideo">
\t \t \t \t \t <source src="./resources/beach.mp4" type="video/mp4">
\t \t \t \t </video>
\t \t \t \t
\t \t \t \t <section class="content col-xs-12">
\t \t \t \t \t
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <article class="home betterThings col-xs-10 col-xs-offset-1">
\t \t \t \t \t \t \t <h1 class="home">Because you have better things to do!</h1>
\t \t \t \t \t \t \t <p class="home">Wouldn't you rather drive to the beach and spend your Saturday basking in the warmth
\t \t \t \t \t \t \t \t of the sun and cooling off in the shallow, salty water of the Gulf instead of cleaning
\t \t \t \t \t \t \t \t your home? Life is short, enjoy it!</p>
\t \t \t \t \t \t \t <a class="home scroll btn btn-default" href="#">Scroll Down<br>
\t \t \t \t \t \t \t \t <span class="home glyphicon glyphicon-menu-down"></span>
\t \t \t \t \t \t \t </a>
\t \t \t \t \t \t </article>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="first col-xs-10 col-xs-offset-1 col-md-3">
\t \t \t \t \t \t \t <article class="home balance">
\t \t \t \t \t \t \t \t <img class="balance img-responsive" src="./resources/balance.jpg"/>
\t \t \t \t \t \t \t \t <h2 class="home balance">It's All About Balance</h2>
\t \t \t \t \t \t \t \t <p class="home">After a long day at work, the last thing you want to worry about is cleaning your
\t \t \t \t \t \t \t \t \t home, not to mention that it depletes valuable time that you could be enjoying other activities.
\t \t \t \t \t \t \t \t \t Even if you don't need a daily housekeeper, having a scheduled cleaning a couple times a month
\t \t \t \t \t \t \t \t \t will help balance the scales between work and life. Remember, we work to live, we don't live to
\t \t \t \t \t \t \t \t \t work!</p>
\t \t \t \t \t \t \t </article>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t \t <div class="middle col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-4">
\t \t \t \t \t \t \t <article class="home busy">
\t \t \t \t \t \t \t \t <img class="busy img-responsive" src="./resources/busy.jpg"/>
\t \t \t \t \t \t \t \t <h2 class="home busy">Who Has the Time?</h2>
\t \t \t \t \t \t \t \t <p class="home">If your schedule is already packed full, finding the time to clean is never easy.
\t \t \t \t \t \t \t \t \t Between dropping the kids off, driving to work, cooking dinner, and walking the dog, who has
\t \t \t \t \t \t \t \t \t the time to clean? Studies have shown conflict among busy families can often come from the
\t \t \t \t \t \t \t \t \t stress of finding (or spending) time to clean. Hiring a housekeeper can help lower your stress
\t \t \t \t \t \t \t \t \t level by allowing you to fit in everything else your busy days have to offer. </p>
\t \t \t \t \t \t \t </article>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t \t <div class="last col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-3">
\t \t \t \t \t \t \t <article class="home dislike">
\t \t \t \t \t \t \t \t <img class="balance img-responsive" src="./resources/dislike.jpg"/>
\t \t \t \t \t \t \t \t <h2 class="home balance">Please NO!</h2>
\t \t \t \t \t \t \t \t <p class="home">If you are like most people, in lieu of cleaning you would rather be doing... well,
\t \t \t \t \t \t \t \t anything! Let's face it: cleaning is not the most desirable way to spend your time. Also, some people
\t \t \t \t \t \t \t \t are \t just better at cleaning that others. If it takes you hours to clean your home and you hate every
\t \t \t \t \t \t \t \t minute of it, why not hire someone that would do it faster so you can devote your time to
\t \t \t \t \t \t \t \t whatever it is you would rather be doing?</p>
\t \t \t \t \t \t \t </article>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <!--=-= FOOTER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <footer class="footer col-xs-12">
\t \t \t \t \t \t \t <img class="footerContact" src="./resources/facebook.png"/>
\t \t \t \t \t \t \t <img class="footerContact" src="./resources/email.png"/>
\t \t \t \t \t \t \t <img class="footerContact" src="./resources/call.png"/>
\t \t \t \t \t \t </footer>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </section>
\t
\t \t \t </div>
\t \t \t
\t \t </div>
\t
\t </body>
</html>
何が問題なのですか？一貫性のないCSSとは何ですか？どのような配置エラーがありますか？ – Elfayer
コードが多すぎます。 [mcve]を参照してください。 – Oriol
@Elfayer - 矛盾した動作は、の配置に関するものです。配置はJSによって計算され、JSは必ず$（ '.header'）。outerHeight（）を正しく計算していないようです。繰り返しますが、それはほとんどの時間で動作しますが、必ずしもそうではありません。これまでChromeでしか再現できなかったことを明記する必要があります。 –
ClarksonDev