如何在不改变屏幕大小的情况下将html元素放在屏幕之外



我想在屏幕外隐藏一个div,但是当我尝试时屏幕大小会发生变化。

例如:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>

当我尝试这个代码

我不想让滑块出现

在body标签中使用css overflow: hidden属性,您可以轻松地摆脱滑块。我附上了下面的代码,运行探索。但是,您可以探索有关溢出属性的更多信息。阅读我在下面链接的文章,以清楚地探索。

W3 School - css overflow

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>

最新更新