Question

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;overflow: hidden;">
            some text
        </div>
    </body>
</html>

我的屏幕分辨率为1920 X 1200（宽X高），我的div的高度为1500像素。显然，这将使屏幕溢出，并且浏览器默认情况下会添加垂直滚动。

我的要求是使此垂直滚动消失，并且将窗口外溢出的所有内容都剪掉。如何使用CSS样式获得此行为？

我尝试了溢出：隐藏在div上对我不起作用

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;overflow: hidden;">
            some text
        </div>
    </body>
</html>

Answer 1

希望以下代码段可以为您提供帮助。

body{height:1200px; width:100%; overflow:hidden}

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color: aqua;height:1500px;width:260px;">
            some text
        </div>
    </body>
</html>

Answer 2

您可以通过添加溢出属性来防止页面/对象溢出。

溢出| y / x轴
溢y y轴
溢出x x轴

其次是隐藏为值

隐藏-溢出被裁剪，其余内容将不可见

body {
    overflow-y: hidden;
}

如何隐藏水平滚动

2 个答案: