如何在我的网站中禁用水平滚动？或者如何设置我的标题和内容，使其适合屏幕的宽度？答案

【问题标题】：How do I disable the horizontal scrolling in my website? Or how can I set my header and content so it fits the width of the screen?如何在我的网站中禁用水平滚动？或者如何设置我的标题和内容，使其适合屏幕的宽度？
【发布时间】：2016-01-26 14:20:26
【问题描述】：

提前感谢您的帮助。我最近创建了一个网站，并且遇到了它的页眉、内容和页脚太宽的问题，所以它们允许人们向右滚动，尽管这完全没有必要。我用溢出隐藏了水平滚动，但人们仍然可以用鼠标或触摸屏向右滚动。如果我将所述元素的宽度设为 100%，它们不适合屏幕的整个宽度，这就是我将它们设置为 105% 的原因。我能做些什么来解决这个问题？这是我的网站http://wwtcomics.com/ 的链接。这是css代码：

.top {background-color: #FF0000;
height:12vw;
min-height:80px;
margin-top: -15px;
margin-left: -10px;
margin-right: -20px;
width:105%;}

.content{background-color:white;
margin: -25px -20px 0px -10px;
color: black;
font-family: Nunito;
width:105%;
position:relative;}

.footer{background-color: #FC6900;
margin-bottom: -15px;
margin-left: -10px;
margin-right: -20px;
width:105%;
height: 50px;
position:relative;}

感谢您的帮助，我已经与这个问题斗争了几个月了。

【问题讨论】：

请创建一个简短的、可重现的问题，并在此处发布所有代码。你可以阅读更多关于如何提出好问题here。

标签： html css header width

【解决方案1】：

这是您当前没有意义的代码： 为什么你甚至把宽度设置为 105% ？

    .top {background-color: #FF0000;
    height:12vw;
    min-height:80px;
    margin-top: -15px;
    margin-left: -10px;
    margin-right: -20px;
    width:105%;}

    .content{background-color:white;
    margin: -25px -20px 0px -10px;
    color: black;
    font-family: Nunito;
    width:105%;
    position:relative;}

    .footer{background-color: #FC6900;
    margin-bottom: -15px;
    margin-left: -10px;
    margin-right: -20px;
    width:105%;
    height: 50px;
    position:relative;}

正确代码：

    .top {background-color: #FF0000;
    height:12vw;
    min-height:80px;
    margin-top: -15px;
    margin-left: -10px;
    margin-right: -20px;
    width:100%;}

    .content{background-color:white;
    margin: -25px -20px 0px -10px;
    color: black;
    font-family: Nunito;
    width:100%;
    position:relative;}

    .footer{background-color: #FC6900;
    margin-bottom: -15px;
    margin-left: -10px;
    margin-right: -20px;
    width:100%;
    height: 50px;
    position:relative;}

【讨论】：

一开始我确实把它设置为 100%，但由于某种原因它没有覆盖整个宽度，它在页眉和右侧滚动条之间留下了空隙。
设为 100% 并调整边距。

【解决方案2】：

查看您的网站和 CSS 后...

将 navigation、content 和 footer 等块的所有宽度更改为 100% 和 NOT 105% 的宽度

我刚刚使用 Google Chrome 开发人员检查器执行此操作，这解决了您的问题。

将其设置为大于100% 的宽度将导致滚动条位于底部。

【讨论】：

谢谢！感谢帮助
如果我的回答对您有所帮助，请勾选该复选标记；）@Tonywwt
另外，为了美观，请继续在 CSS 中将 padding-right: 40px; 添加到 .navigation 类中。这样，您的导航就不会紧贴页面边缘。这样看起来也更干净:) @Tonywwt
谢谢！我试图打勾，但它说我没有足够的声誉来打勾，无论如何，非常感谢您的帮助！将立即查看导航填充！

【解决方案3】：

感谢您的帮助！

我在另一个问题中找到了解决方案。确实，我必须将width 更改为 100%，但这会使网页周围出现一个小的白色 margin。

这段代码解决了整个问题：

html, body {
margin: 0;
}

【讨论】：