网站在Atom中显示得很好。在任何浏览器中都不起作用

Question

我有一个目前正在开发的网站。

出于某种原因，某些div在网站投放生产（现场）后不想接受他们在网站上的位置。

在我和其他div的底部的“关注我们”标签中发生了这种情况。

然而现在真正困扰我的是这个网站的内容部分：http://dockmann.com/projects.html应该更加统一。

$(document).ready(function(){

  $('.handler').click(function() {
     var clicks = $(this).data('clicks');
     if (clicks) {
       $('.container').css("top", "447px");
       $('.nBar').css("height", "300px");
       $('.nav').css("height","298px");
       $('.navigation').css("display","flex");  // odd clicks
     } else {
       $('.container').css("top", "147px");
       $('.nBar').css("height", "0px");
       $('.nav').css("height","0px");
       $('.navigation').css("display","none");  // even clicks
     }
     $(this).data("clicks", !clicks);
   });
   $('.popup1').click(function(){
     var clicks = $(this).data('clicks');
     if (clicks) {
       $('.popup1').animate({bottom:-50});
     } else {
       $('.popup1').animate({bottom:-77});
     }
     $(this).data("clicks", !clicks);
   });
   $('.gray1').click(function(){
     alert('Attention, you are now leaving Dockmann.com; we are no longer responsible for any 3rd party content after you leave out site.')
   });
});

* {
  margin:0;
  font-family: 'Roboto', sans-serif;
}
.topWrapper{
  position: fixed;
  top:0;
  z-index:10;
  width: 100%;
  box-shadow: 0 0 25px black;
}
.header{
  /*border: 1px solid rgb(0,0,0);*/
  text-align: left;
  width: 100%;
  background-color: white;
  height:75px;
  position: relative;
  top:0px;
}
/*#title{
  padding-left: 10px;
  padding-top: 10px;
  font-size: 50px;
}*/
.titleTwo{
height:60px;
padding-top: 10px;
padding-left: 10px;
}
#contactBox{
  position:absolute;
  right:20px;
  top:20px;
  width:100px;
  height:40px;
  background-color: rgb(239,172,166);
  color: rgb(80,100,119);
  transition: 0.25s;

}
#contactBox:hover{
  background-color: rgb(80,100,119);
  color: rgb(239,172,166);
  box-shadow: 0px 0px 25px rgb(239,172,166);
}
/*CONTACT US BUTTON = FTEXT*/
.fText{
  font-size: 15px;
  padding: 10px;
}

.nav{
  height:50px;
  width:100%;
  border: 1px solid rgb(200,200,200);
  background-color: white;
}
.nBar{
  display: flex;
}
li {
  display: inline-flex;
  padding: 15px 40px 10px 40px;
}
#home{
  height:26px;
  margin-top: 0px;
  /*border: 1px solid black;*/
  color: rgb(80,100,119);
  transition: 0.10s;
}
#bio{
  height:26px;
  margin-top: 0px;
  /*border: 1px solid black;*/
  color: rgb(80,100,119);
  transition: 0.10s;

}
#projects{
  height:26px;
  margin-top: 0px;
  /*border: 1px solid black;*/
  color: rgb(80,100,119);
  transition: 0.10s;

}
#services{
  height:26px;
  margin-top: 0px;
  /*border: 1px solid black;*/
  color: rgb(80,100,119);
  transition: 0.10s;

}
#contact{
  height:26px;
  margin-top: 0px;
  /*border: 1px solid black;*/
  color: rgb(80,100,119);
  transition: 0.10s;

}

#home:hover{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  /*transition: 0.25s;*/
  box-shadow: 0px 0px 15px rgb(239,172,166);
}
#bio:hover{
  /*background-color: black;*/
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  /*transition: 0.25s;*/
  box-shadow: 0px 0px 15px rgb(239,172,166);
}
#projects:hover{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  /*transition: 0.25s;*/
  box-shadow: 0px 0px 15px rgb(239,172,166);
}
#services:hover{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  /*transition: 0.25s;*/
  box-shadow: 0px 0px 15px rgb(239,172,166);
}
#contact:hover{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  /*transition: 0.25s;*/
  box-shadow: 0px 0px 15px rgb(239,172,166);
}
a{
  text-decoration: none;
  color:black;
}

/*---------------------------------------body starts here*/
.container{
position:absolute;
top:127px;
width:100%;
z-index:1;
}
.content{
  display: flex;
  width: 100%;
  min-width: 960px;
  flex-wrap: wrap;
}
/*here the project grid starts*/
.prj1link{
  width: 50%;
  height:250px;
  order:0;
  background-image: url('https://s5.postimg.org/5100sghp3/prj1.png');
  background-position: center;
  background-size: cover;
  background-position: top;
  z-index: 98;
}
/*gray1 is the opaque color on the div*/
.gray1{
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0.4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}
.gray1:hover{
  color:red;
}
.window1{
  background-color: black;
  z-index: 100;
  height:10px;
  font-size: 30px;
}

.footer {
  width: 100%;
  height:65px;
  min-height: 50px;
  background-color: white;
  order:4;
  text-align: center;
  border-top: 1px solid rgb(200,200,200);
}
.legal{
  padding-top: 5px;
  font-size: 12px;
}
.legalText{
  color:rgb(200,200,200);
}
.legalText:hover{
  color:rgb(239,172,166);
}
.handler{
  width: 100%;
  height:50px;
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  text-align: left;
  padding: 20px 0 0 42px;
  font-size: 30px;
  display:none;
  cursor:pointer;
}
.popup1{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  height:100px;
  width: 100px;
  position:fixed;
  bottom:-77px;
  right:10;
  z-index: 10;
  border-radius: 10px;
  display:flex;
  flex-wrap: wrap;
  flex-flow: row;
  align-content: space-between;
  border: 1px solid white;
}
.popupT{
  width: 100%;
  text-align: center;
  font-weight: bolder;
  font-size: 20px;
}
.fbook{
  position: absolute;
  bottom:50px;
  right:70px;
  height:25px;
  width: 25px;
  background-color: white;
}
.twitter{
  position: absolute;
  bottom:50px;
  right:37px;
  height:25px;
  width: 25px;
}
.insta{
  height: 25px;
  width: 25px;
  position: absolute;
  bottom:50px;
  right:5px;
}
.popup1:hover{
  box-shadow: 0px 0px 15px rgb(239,172,166);
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Dockmann creates websites and web apps that are light and responsive">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Dockmann Corp">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/styleProjects.css" />
  <link rel="icon" href="images/faviconR.png" type="image/x-icon" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <!-- <script src="jquery-3.1.1.min.js"></script> -->
  <script type="text/javascript" src="js/scriptProjects.js"></script>
  <title>dockmann</title>
</head>
<body>
  <div class="topWrapper">
    <div class="header">
      <!-- <h1 id="title">DOCKMANN</h1> -->
      <a href="http://www.dockmann.com"><img class="titleTwo" src="css/images/DockmannH.svg" /></a>
      <a href="mailto:info@dockmann.com"><div id="contactBox">
        <p class="fText">
          Contact Us!
          </p>
      </div>
      </a>
    </div>
    <div class="nav">
      <ul class="nBar">
        <!--inserted .navigation because it will help
        differentiate the nav bar links when I add
         other "<a> links" along the page -->
        <a class="navigation" href="http://dockmann.com"><li id="home">
          HOME
        </li></a>
        <a class="navigation" href="bio.html"><li id="bio">
          BIO
        </li></a>
        <a class="navigation" href="projects.html"><li id="projects">
          PROJECTS
        </li></a>
        <a class="navigation" href="services.html"><li id="services">
          SERVICES
        </li></a>
        <a class="navigation" href="contact.html"><li id="contact">
          CONTACT
        </li>
        </a>
      </ul>
      <div class="handler">
        Menu
        <img class="menuIcon" src="css/images/menu1R.svg" />
      </div>
    </div>
  </div>
  <div class="bodyWrapper">
    <div class="container">
      <div class="content">
        <a class="prj1link" href="http://www.miamitheory.com"><div class="prj1">
          <div class="gray1">
            <!-- window 1 is designed to display text- so on and so forth -->
            <div class="window1">
              <p class="windowt1">
              THE MIAMI THEORY</p>
            </div>
          </div>
        </div></a>
        <div class="footer">
        <!-- add link here to disclaimer page -->
        <p class="legal">
          <a class="legalText" href="disclaimer.html">LEGAL</a>
        </p>
        </div>
      </div>
    </div>
    <div class="popup1">
      <p class="popupT">
        Follow us!
      </p>
      <a href="https://www.facebook.com/dockmann2016/"><img class="fbook" src="css/images/facebook2.svg" /></a>
      <a href="https://twitter.com/dockmann2016"><img class="twitter" src="css/images/twitter1.svg" /></a>
      <a href="https://www.instagram.com/dockmann_com/"><img class="insta" src="css/images/instagram3.svg" /></a>
    </div>
  </div>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-82779137-1', 'auto');
    ga('send', 'pageview');

  </script>
</body>
</html>

Answer 1

  

我和＃34;关注我们＆＃34;其他div中底部的选项卡。

＆＃34;关注我们＆＃34;按钮位于页面底部，因为它是position: fixed; bottom: -77px;

  

然而现在真正困扰我的是这个网站的内容部分：http://dockmann.com/projects.html应该更加统一。

你是什么意思＆＃34;更统一＆＃34;究竟？如果你想要＆＃34;迈阿密理论＆＃34;要以背景位于该区域的中间，请将height: 100%;添加到.prj1。由于它是直接后代，.gray1 height: 100%; display: flex; align-items: center; justify-content: center; .gray1的唯一孩子，.window1（{1}}（并保留文字＆＃34;迈阿密理论＆＃ 34;），将水平和垂直居中。

Answer 2

你失去了一个＆＃34; px＆＃34;在＆＃34;右：10＆＃34;。

.popup1{
  background-color: rgb(80,100,119);
  color:rgb(239,172,166);
  height:100px;
  width: 100px;
  position:fixed;
  bottom:-77px;
  right:10px;
  z-index: 10;
  border-radius: 10px;
  display:flex;
  flex-wrap: wrap;
  flex-flow: row;
  align-content: space-between;
  border: 1px solid white;
}