Question

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>

    <style>
        #div1 {
            position: absolute;
            top: 0px;
            left: 0px;
            min-width: 100%;
            width: auto;
            height: 100%;
            background: blue;
        }

        #div2 {
            position: absolute;
            top: 30%;
            left: 0px;
            width: 6000px;
            height: 300px;
            background: black;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

</html>

例如在上面的html页面中

Starting view

When scrolling to the right

我认为将div1宽度设置为auto会匹配div2宽度，但它不起作用。我想念什么吗？我需要使用javascript自动更新宽度还是只能使用CSS来完成宽度？

即使页面被调整大小，我也希望它覆盖整个页面。

Answer 1

在position: relative上设置#div2，#div1将随之展开：

#div1 {
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 100%;
    width: auto;
    height: 100%;
    background: blue;
}

#div2 {
    position: relative;
    top: 30%;
    left: 0px;
    width: 6000px;
    height: 300px;
    background: black;
}

<div id="div1">
  <div id="div2"></div>
</div>

CSS不适用于页面溢出

1 个答案: