我的滚动条不在浏览器的右侧？答案

【问题标题】：My scrollbar doesn't go on the right side of browser?我的滚动条不在浏览器的右侧？
【发布时间】：2016-03-26 18:53:08
【问题描述】：

我对 CSS/HTML 比较陌生。对于一个学校项目，我必须制作一个无响应的 1140px 网站。我决定我希望 1140px 的两边都具有白色背景色（在浏览器的中间），我希望它具有深灰色。

所以我在 html 中添加了深灰色，在正文中添加了白色，宽度为 1140 像素。我必须在 html 上放置一个“溢出：隐藏”，否则主体的白色背景颜色不会显示。但问题是，由于隐藏的溢出，我的滚动条不在浏览器的最右侧，而是在我的身体右侧。

我的问题截图：

 html {
    background-color: rgb(50,50,50);
    overflow: hidden;
}

body {
    line-height: 1;
    width: 1140px;
    margin: 0 auto;
    background-color: white;
    overflow: auto;
    box-shadow:0px 0px 20px #000000;
}

有没有办法将我的滚动条向右移动并忽略溢出隐藏属性？或者其他方式获得相同的背景结果？

【问题讨论】：

你能做一个 sn-p 或一个 jsfiddle 或其他东西来证明这个问题吗？除了你在这里告诉我们的内容之外，肯定还有其他事情发生，因为如果我用你的信息创建a fiddle，它只会在窗口的右边缘显示滚动条。
您通常应该尽量避免过多地设置 html 标签的样式。在许多情况下，HTML 标签 not 被浏览器视为单独的块元素。很明显，您需要删除 HTML 标记的溢出声明，并找到一种更好的方法来配置您想要的内容……只需正文，然后是内容的 div。
你说得对，Lister 先生，还有其他问题，所以我查看了整个 CSS，有这样的代码：html, body { min-height: 100%;高度：100%；我删除了它，它工作正常。我没有想到其他问题可能是问题谢谢！将来我会尝试另一种方式，新的，但我会记住每一个，也谢谢你，Scott！

标签： html css

【解决方案1】：

去掉你html上的overflow:hidden，让你的body宽度100%，然后让它的背景色透明。这会给你一个完整的深灰色页面（因为 HTMl 已经有灰色背景）。现在在 body 中添加一个 div 并将其背景颜色设置为白色。也让你的 div 被放置在中心，通过给一些左边距和右边距，把你所有的内容放到这个 div 中。就是这样，现在您将在浏览器的最右侧看到滚动条。这是一个可能对你有帮助的sn-p

html{
  background-color:grey;
}

body{
  width:100%;
  height:auto;
  background-color:transparent;  
}

.appContainer{
   margin: 0px 40px 0px 40px;
   background-color:white;  
   height:2000px;
}

<body>
 <div class="appContainer">
 
 </div>
</body>

【讨论】：

哦，谢谢！下次我会这样做，我不知道正确的做法:)
@SarahVanDenBerghe 如果此解决方案帮助您解决了您的问题，请将其标记为答案，因为它可能对未来的受众有用