1

Imagine an HTML page like the following one:

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

The free div is absolutely positioned, and its position is outside the visible area of the browser. Because of that, it will generate an overflow, and scrollbars will be shown. This is ok.

The main div, instead, should be as big as the full area inside the browser. It shouldn't be limited to the visible area.

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

As you can see here, http://jsfiddle.net/y79NS/12/, the gray div doesn't extend in the "overflow zone". It works if I add a static width/height to html and body elements, but I don't know in advance how much it should be big.

Is there a pure CSS solution? If not, what's the best way to do it with Javascript, keeping in mind that the user could resize the browser in any moment?

4

1 回答 1

0

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

于 2013-09-16T19:59:38.020 回答