时间戳

首页 > 解决方案 > CSS不适用于页面溢出

html - CSS不适用于页面溢出

问题描述

<!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 页面中

起始视图

向右滚动时

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

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

标签： htmlcss

解决方案

设置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>

推荐阅读