HTML / CSS 网站 - 禁用滚动条答案

【问题标题】：HTML / CSS Website - Disabling scroll barHTML / CSS 网站 - 禁用滚动条
【发布时间】：2015-01-10 14:28:02
【问题描述】：

我不希望这个滚动条出现在这里。我不想隐藏它，但我希望它被禁用。根本没有滚动。

截图：https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png

index.html 和 stylesheet.css：

HTML:
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Home</title>
    </head>
    <body>
        <div id="white">
        </div>
    </body>
</html>


CSS:
html {
    height: 100%;
    background-color: #272C34;
    margin: 0%;
    padding: 0%;
}

body{
    height: 100%;
    margin: 0%;
    padding: 0%;
}

#white {
    width: 100%;
    height: 76%;
    background-color: #E8E8E7;
    margin-top: 10%;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    z-index: 1;
}

【问题讨论】：

请在您的问题中发布您的代码，以便我们提供帮助。
您应该能够复制和粘贴它。您可以稍微格式化它，如果它的格式不好，有人可能会为您编辑它。代码的屏幕截图很难处理！
修复了！解决方案：将其所在元素的内边距设置为0px；

标签： html css scroll window border

【解决方案1】：

这是浏览器设置默认填充/边距的问题。将任何 CSS 重置应用到网站。

如果不添加任何一个，请在此处找到http://www.cssreset.com/

或使用此通用 CSS 重置

* {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案2】：

body 通常设置了一个边距，删除它，你的 div 应该是屏幕的 100%：

body{
    margin: 0;
}

另外请注意，更多标签默认应用边距/填充，您可以使用 reset.css 或 normalize.css 删除边距/填充/等，以使您的页面在所有浏览器上呈现相同：

【讨论】：

【解决方案3】：

如果您的意思是 Tmp 中左右两边的空格。将此添加到您的样式中

Body{
margin:0;
padding:0;
}

【讨论】：

【解决方案4】：

HTML：

<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>

CSS：

body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}

#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}

截图：

看看Live.

【讨论】：

【解决方案5】：

用途：宽度：100vw；溢出-X：隐藏；

这应该可行。当有滚动条时，使用overflow-X:hidden表示宽度或使用overflow-y:hidden表示高度；

【讨论】：

这行得通吗？我不确定将 width 设置为视口 height 的 100% 是故意的
你是对的，我的错。我已经纠正了。我的意思是100vw；取点