如何摆脱侧滚动条答案

【问题标题】：how to get rid of side scroll bars如何摆脱侧滚动条
【发布时间】：2021-05-14 16:16:38
【问题描述】：

如何查看 div class= "container" 我分配了高度 100vh 和宽度 100vw 并为其分配了背景图像。到目前为止一切顺利，但只要我在 div class= "container" 下插入任何其他内容，就会出现侧滚动条。为什么会这样？根据我的逻辑，它不应该发生。如果我在 div class= "container" 下放置一个 inline / inline-block 元素，也会发生这种情况。

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.container
{
    width: 100vw;
    height: 100vh;
    background-image: url("background-Home.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    <div class="container">
    </div>

    <div>
        loremfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    </div>

【问题讨论】：

标签： html css height width

【解决方案1】：

你可以使用这个：

    <style>
      *
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.container
{
    width: 100vw;
    height: 100vh;
    background-image: url("background-Home.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.container img {
  width: 100vw;
  height: 100vh;
}
div {
  padding-bottom: 100px;
}

    </style>
</head>
<body>

    <div class="container">
    <img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"/>
    </div>
        <div>
        loremfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    </div>

删除 div 上的 padding-bottom 仅用于演示目的

【讨论】：

YT_Xaos，好的，但为什么会发生这种情况？有什么具体原因吗？
好吧，当正文中有很多项目（或项目中的文本）时，它会生成一个滚动条，但除此之外我不知道。
YT_Xaos，隐藏在正文中的溢出删除了我的 div class= "container" 之后的所有内容。不行！
容器后面的div是必须在底部还是可以在顶部？
底部我希望 div 到底部