避免绝对定位的元素超出页面宽度的边界

Question

我有一个绝对定位 div，里面有一张图片。它使用顶部和左侧定位，元素的宽度是相对的，我使用的是百分比。我正在使用 Bootstrap 作为响应框架。

麻烦的是，我无法避免水平滚动，电脑和智能手机都在水平滚动。

我认为在绝对定位中这不会影响。但它使视口变大，因此出现了水平滚动。

我不知道如何解决这个问题，或者从哪里开始。

Answer 1

在您的 :

中使用这个 'meta' 标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

然后你的意志看起来或多或少是这样的：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <title>Menu Page</title>

    <link rel="stylesheet" href="css/style.css">
 </head>

Answer 2

你可以放

overflow-x: hidden;

在 body 标签上。

这避免了某处绝对定位元素导致的错误水平滚动。

避免绝对定位的元素超出页面宽度的边界

Avoid that an absolute positioned element push the boundaries of the page width

css

position