Question

想象一下如下的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的最佳方法是什么，请记住用户可以随时调整浏览器的大小？

Answer 1

您只是在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/

当绝对定位元素在浏览器窗口之外时，扩展“body”

1 个答案: