Question

I was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won’t scroll.

Example – currently even though it goes beyond the screen it doesn’t increase the size of the document, but if position is changed to absolute / relative it will.

I would like for the position to be absolute (although relative will work), yet not increase the document size.

I’m looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).

Answer 1

Depending what else you have on the page, this might do the trick.

body {
    height:100%;
    width:100%;
    overflow:hidden;
}


nav{
    width:98px;
    height:750px;
    background:blue;   
    position:absolute;
}

If you want other elements to overflow the body, use this code.

<div class="wrapper">
    <nav></nav>
</div>

body {
    height:100%;

}

.wrapper {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    overflow:hidden;
}

nav{
    width:98px;
    height:750px;
    background:blue;   
    position:absolute;
}