如何删除分区底部的滚动条？答案

【问题标题】：How can I remove scroll bar in the bottom side of my division?如何删除分区底部的滚动条？
【发布时间】：2020-06-14 15:20:01
【问题描述】：

我想在 Text Division 类中设置 tex1,tex2 和 text3 划分，底部没有滚动条。但是正如你看到的底部有一个滚动条。我的错误是什么不让我，在 Text Class Div 的底部没有滚动条？身体 { 边距：0px；方向：rtl； }

.Text {
    width: 500px;
    min-height: 500px;
    height: auto;
    overflow: auto;
    margin: 50px 30px;
    border: 2px solid red;
}

.Text1 {
    width: 100%;
    height: 60px;
    margin: 30px auto;
    border: 1px dashed green;
    font-family: "IranSans";
    font-size: 20px;
    text-align: center;
    color: #fff;
}

.Text2 {
    width: 100%;
    min-height: 60px;
    height: auto;
    overflow: auto;
    color: #fff;
    font-size: 32px;
    font-weight: bolder;
    font-family: "IranSans";
    text-align: center;
}

.Text3 {
    width: 100%;
    min-height: 80px;
    height: auto;
    overflow: auto;
    font-size: 12px;
    font-family: "IranSans";
    color: #fff;
    text-align: center;
    border: 1px solid yellow;
}

.Resume {
    width: 180px;
    height: 60px;
    margin: 0px auto;
    border-radius: 5px;
    background-color: #00d363;
    border: 1px solid #00d363;
    font-family: "IranSans";
    text-align: center;
}

.RezumeA {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    line-height: 50px;
}

.RezumeA:hover {
    background-color: #007bff;
    color: #00d363;
    border: #00d363;
}

<body>



            <div class="Text">
                <div class="Text1">بیش از 5000 شغل</div>
                <div class="Text2">شغل رویایی ات دست پیدا کن</div>
                <div class="Text3">ما بهترین و سریعترین ،راههای دستیابی به شغل مورد علاقه تان فراهم کرده ایم</div>
                <div class="Resume"><a href="#" class="RezumeA">ارسال رزومه</a></div>
            </div>
        </div>

    </header>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

只需将CSS的Text类中overflow的属性更改为hidden即可：

.Text {
    width: 500px;
    min-height: 500px;
    height: auto;
    overflow: hidden;
    margin: 50px 30px;
    border: 2px solid red;
}

基本上，由于您的溢出设置为auto，它会尝试缩放必须显示滚动条的内容。有关更多详细信息，请查看此 W3schools 文档：https://www.w3schools.com/css/css_overflow.asp

【讨论】：

【解决方案2】：

你可以用overflow: hidden;禁用滚动条，一般情况下会溢出，但如果你只想隐藏水平，你可以放overflow-x: hidden，垂直：overflow-y: hidden 所以，在你的css中你可以这样写：

.Resume {
    overflow-x: hidden;
    width: 180px;
    height: 60px;
    margin: 0px auto;
    border-radius: 5px;
    background-color: #00d363;
    border: 1px solid #00d363;
    font-family: "IranSans";
    text-align: center;
}

【讨论】：

【解决方案3】：

或者你可以这样做

.Text > div {
    box-sizing: border-box;
}

所以所有带有边框的嵌套 div 都适合父 el

【讨论】：