Geek Answers Handbook

Creating elements does not affect page height (thus scrolling)

I make a website with several floating images on one side of the screen. Pages are between 900-3000 pixels high, so I created floating images to cover this area.

The problem is that even if the page is only 900 pixels high, the page will display floating images as objects on the page and make it possible to scroll them .. make the page much longer than necessary.

From what I could put together on StackOverflow. Absolute elements should not be taken into account in the document flow, but this is clear. I also saw answers related to using overflow: hidden, but this does not seem to have the desired effect.

Maybe the only way to create images based on page height using javascript?

here is the WIP site: http://apa.smars.se

+4
source share
2 answers

If you want only a CSS solution only you need to do:

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

  • Add the following element as the first element in the <body> :

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

  • Move the <div class="botleft ..."> and <div class="botright ..."> to this div.

Applying position:relative to the <body> element and adding another element to it with position:absolute; left:0; top:0; width:100%; height:100% position:absolute; left:0; top:0; width:100%; height:100% position:absolute; left:0; top:0; width:100%; height:100% , you tell this element to "track" the size of the <body> element. And adding overflow:hidden; hides images overflowing from below.

The disadvantage of this solution is that you can see the cut out images at the bottom of the page. Well, nothing is perfect :)

This is what your DOM tree should look like after this change

enter image description here

To immediately see the results, you can run the following code from the browser 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";
+3
source

When you give an element an absolute element, it becomes absolute, associated with the first relative element that contains the absolute element.

And since the default position for the elements is static, you may need to change it for the container element (perhaps body in your case).

Good luck

+1
source

More articles:


All Articles