Question

在我的代码中，我想要一些非常简单的东西。白色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>

Answer 1

将body和#container width设置为100％应解决问题

Answer 2

您应该使用overflow来允许或不允许滚动。 Here is a link了解如何使用它。

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

2 个答案: