javascript - Css 溢出隐藏所有内容。无法修改滚动条

标签 javascript html css

在我的代码中,我想要一些非常简单的东西。白色 div 应始终保持在水平中心,固定 80vw 宽度和相对高度。垂直滚动条应该隐藏,垂直应该是自动的。有一个问题,因为水平滚动条显示不必要。当我试图隐藏它时,整个内容都消失了,我无法找出问题所在。

var array = ['cat', 'dog', 'lion', 'tiger', 'snake']
for (var i = 0; i < 50; i++) {
    var random = Math.floor(Math.random() * (array.length));
    var n = array[random];
    var container = document.getElementById("container");
    container.innerHTML += '<div class="box">' + n + '</div>';
}
*{
outline:none;
transition:1s;

}
::-webkit-scrollbar:horizontal {
    display: none; 
}
html,body {
   position:absolute;
   left:0;
   top:0;
  margin:0;
  padding:0;
  width:100vw;

}

#container {

  position:absolute;
  top:0;
  left:0;
    height:auto;
  width:100vw;
    background-color: black;
	
}

.box {
  height: auto;
  width:80vw;
  margin-left:10vw;
  margin-top:10vh;
text-align:center;
vertical-align:middle;
font-size:calc(2vh + 2vw);
    background-color: white;
 
}
<html>
<head>
</head>
<body>
<div id="container"></div>
</body>
</html>

最佳答案

将正文和#container 宽度设置为 100% 应该可以解决问题

关于javascript - Css 溢出隐藏所有内容。无法修改滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48322075/

相关文章:

javascript - 根据值隐藏某些选项

html - 禁用我网站上的 Chrome 翻译栏

javascript - 在文件上传对话框中限制文件类型

javascript - JS动态生成for循环

javascript - 如何检查 HTML 元素的动画?

javascript - HTML SVG 重用组 <g> 和 <use> 并为每个实例单独更改内部元素的属性

css - 在 Angular-material 中将 more_vert 按钮对齐右侧

jquery - 当文本框与标签位于不同的 div 中时水平对齐文本框

javascript - 为什么在应用类时需要 setTimeout 才能让我的过渡生效?

javascript - 2 以下自调用函数不起作用