Question

当我导航到带滚动条的页面时，我想知道如何阻止这些元素移动。我注意到如果我选择带滚动条的页面，我的元素会略微移动。 Here就是我的意思。我想某种方式迫使滚动条出现在我的所有页面上，但我甚至不确定如何做到这一点，我宁愿先看看是否有不同的解决方案。如果有人能帮助我，我会很感激。如果您需要更多代码，请告诉我，我可以将其添加到问题中。

谢谢，格兰特

这是我的横幅/标题和导航栏的CSS

/*TOP BANNER SECTION*/

#banner {
height: 100px;
    position: relative;}

#logo {position:relative;
top: -90px;
left:700px;}

#ip_box {
         width:210px;
         height:43px;
         background:#212121;                 
         color: white;
         font-size: 15px;
         bottom: 10px;
         left: 77px;
         position: absolute;}

#ip_text {bottom: 11px;
          left: 64px;        
          color: white;
          position:absolute;}

#teamspeak_box {width:159px;
                height:43px;
                background:#212121;
                bottom: 10px;
                right: 76px;
                position: absolute;}

#teamspeak_box_2 {width:43px;
                  height:43px;
                  background:#313131;
                  bottom: 10px;
                  right: 191px;
                  position:absolute;}

#teamspeak_text {color: white;
                 bottom: 21px;
                 right: 66px;
                 position: absolute;}          

#teamspeak_image {bottom: 9px;
                 right: 104px;
                position: absolute;}

#red_bar {border-bottom: 5px solid #C62828;
bottom: 190px;
position:relative;}

/*TOP NAV BAR SECTION*/

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

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

#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;}

Answer 1

将overflow-y: scroll添加到body元素，这将强制滚动条始终显示。

Answer 2

如果您有容器，请尝试将内容宽度设置为100％，因为内容需要进行调整以补偿添加和删除滚动条。滚动条的内容看起来是正确的，但当它被删除时，它只是在页面中居中以补偿额外的空间，并且不会改变大小，因此它看起来更小。

滚动条页与横幅元素定位冲突

2 个答案: