gpt4 book ai didi

javascript - 当绝对定位元素在浏览器窗口之外时扩展 "body"

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

想象一个如下所示的 HTML 页面:

<body>
<div class="main">
<div class="free">aaa</div>
</div>
</body>

free div是绝对定位的,它的位置在浏览器可见区域之外。因此,它会产生溢出,并显示滚动条。这没关系。

main div 应该与浏览器内的完整 区域一样大。它不应局限于可见区域。

html, body {
height: 100%
}
.main {
background-color: gray;
width: 100%;
height: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: 3000px;
top: 3000px;
}

如您所见,http://jsfiddle.net/y79NS/12/ ,灰色 div 不会在“溢出区”中延伸。如果我向 html 和 body 元素添加静态宽度/高度,它会起作用,但我事先不知道它应该多大。

是否有纯 CSS 解决方案?如果不是,请记住用户可以随时调整浏览器大小,使用 Javascript 执行此操作的最佳方法是什么?

最佳答案

你只是在你的 CSS 中少了一个分号,如果你想隐藏 .free 也可以使用负边距:

html, body {
height: 100%;
}
body {
position: relative;
}
.main {
background-color: gray;
height: 100%;
width: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: -3000px;
top: -3000px;
}

http://jsfiddle.net/btipling/y79NS/17/

关于javascript - 当绝对定位元素在浏览器窗口之外时扩展 "body",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18836234/

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