gpt4 book ai didi

html - CSS 不适用于页面溢出

转载 作者:太空宇宙 更新时间:2023-11-04 06:25:35 25 4
gpt4 key购买 nike

<!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 宽度设置为自动会匹配 div2 宽度,但它不起作用。我错过了什么吗?我需要使用 javascript 自动更新宽度还是只能使用 CSS 来完成?

即使页面大小发生变化,我也希望它覆盖整个页面。

最佳答案

#div2上设置position: relative#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>

关于html - CSS 不适用于页面溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55108409/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com