Question

我遇到一个问题，每当我导航到不同的页面时，我网站的整个包装部分有时会根据您所在的页面左右移动。如果可能的话，我会喜欢这样，所以无论你导航哪个页面，它都会保持不变。我将提供snippet我的意思。

这是我的网站整个样式的CSS，如果它有帮助，如果你可能需要任何其他代码，如html让我知道，我也可以提供。

/*CSS FOR ALL PAGES*/

/*BODY/WRAPPER SECTION*/

body {background:#EEEEEE;
      background-repeat: no-repeat;
      background-attachment: fixed;}

#wrapper {width: 1750px;
          margin: 0 auto;
          background-color: white;
          border-radius: 5px;
          box-shadow: 0px 1.5px 2px 0px;
          border: 1.5px solid #E0E0E0;
          color: #E0E0E0;}

/*TOP BANNER SECTION*/

#banner {height:150px;}

#logo {}

#ip_box {
         width:200px;
         height:43px;
         background:#212121;
         border-radius: 5px;
         box-shadow: 1px 1px 5px;}

#ip_text {color: white;
          font-size: 15px;}

#teamspeak_box {width:159px;
                  height:43px;
                    background:#212121;
                    border-radius: 5px;
                    box-shadow: 1px 1px 5px;}

#teamspeak_box_2 {width:43px;
                   height:43px;
                   background:#313131;
                   border-radius: 5px 0px 0px 5px;}

#teamspeak_text {color: white;}          


#teamspeak_image {}


/*TOP NAV BAR SECTION*/

* {margin: 0px;
   padding: 0px;}

#nav_bar {background-color: #313131;
          height: 45px;
          text-align: center;}

#nav_bar ul {padding: 0;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: normal;
                      padding-left: 15px;
                      padding-right: 15px;
                      line-height: 45px;
                      transition: all 0.5s ease;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: white;
                   margin-left:0px;
                   box-shadow: 0px 1px 5px;
                   text-align: left;
                   z-index:1;}

#nav_bar ul li a.active-page {background-color: #212121;}

#nav_bar ul li:hover ul li a {line-height: 2em;}

#nav_bar ul li a:hover {background: #212121;
transition: all 0.5s ease;
}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #000000;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #1565C0;
                              color: white;
transition: all 0.5s ease;}

/*BOTTOM FOOTER SECTION*/

#bottom_footer {width: 1750px;
                height: 50px;
                margin: 0px auto;
                margin-top: 15px;
                margin-bottom: 15px;
                background:white;
                border-radius: 5px;
                box-shadow: 0px 1.5px 2px 0px;
                border: 1.5px solid #E0E0E0;
                color: #E0E0E0;}

#created_by {padding: 17px;
             text-align: center;
             color:black;}

#social_media_youtube {float: left;
                       margin: -46px;
                       margin-left: 315px;}

#social_media_twitch {float: left;
                      margin: -43px;
                      margin-left: 380px;}

#social_media_twitter {float: right;
                       margin: -53px;
                       margin-right: 368px;}

#social_media_facebook {float: right;
                        margin: -47px;
                        margin-right: 325px;}

/*ELEMENT SELECTIONS SECTION*/

p {font-family: Arial, Helvetica, sans-serif;
   margin-left: 20px;
   margin-right: 20px;}

ul {font-family: Arial, Helvetica, sans-serif;
    margin-left: 37px;
    color:black;}

h3 {font-family: Arial, Helvetica, sans-serif;
    margin-left: 20px;
    color:black;}

h4 {font-family: Arial, Helvetica, sans-serif;
    margin-left: 20px;
    color:black;}

Answer 1

您的网页呈现方式不同。您看到的问题是某些页面上的窗口中出现滚动条，导致视口缩小约20px。

除非您使所有页面的长度足以触发滚动条，或者足够短以不触发滚动条，否则您无法真正做到这一点。

_{_{至少据我所知......}}

CSS Wrapper在导航时转移

1 个答案: