Making elements not affect page height (thus scrolling)

css, html, javascript

Solution

If you want a CSS only solution here is what you should do:

- Add `position:relative;` and `margin:0` to the `<body>` element.

Add next element as a first element in your `<body>`:

<div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">

Move the `<div class="botleft ...">` and `<div class="botright ...">` elements to that div.

By applying `position:relative` to the `<body>` element and adding to it another element with `position:absolute; left:0; top:0; width:100%; height:100%` you are telling that element to "track" the size of the `<body>` element. And by adding `overflow:hidden;` hides the bottom-overflowed images.

The downside in this solution is that you may see cut images at the bottom of the page. Well, nothing is perfect :)

Here is how your DOM tree should look like after this change

To see the results immediately you can run following code from browser's console:

d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";

Problem

I'm making a website with a number of "floating" images one each side of the screen. Pages range in height between about 900-3000 pixels, so I've created floating images to cover this area. The problem is, that even if a page is only 900 pixels high, the page will see the floating images as objects on the page and make scrolling to them possible.. making the page much longer than needed. From what I could gather on StackOverflow. Absolute elements shouldn't count into the flow of the document, but clearly these are. I've also seen answers involving usage of overflow:hidden, but this doesn't seem to have the desired effect at all. Maybe the only way would be to create the images depending on the page height using javascript? here is the WIP of the site in question: http://apa.smars.se

Original source