All geek questions in one place

Absolutely positioned element exiting the screen when filling

I have a DIV container, .floatingPage , which is located absolutely above the other two DIV containers .top and .bottom . My problem is that the contents of the .floatingPage element is dynamic and sometimes contains a lot of data that extend the .floatingPage below the visible part of the screen.

HTML

 <div class="top"> <div class="floatingPage"> // blah blah blah (lots of data) </div> </div> <div class="bottom"></div>

CSS

 .top { height:350px; background:'images/background.png'; position:relative; } .bottom { height:350px; background:#F1F1F1; } .floatingPage { position:absolute; top:50px; }

Now, since I know that my application users use JS (company control panel), I calculated the height of the .floatingPage element and increased the height of .bottom to match the new content. So far, this has been normal, and this has begun to create problems. In addition, I do not want to do this hacking for other projects that have users without JS.

I need this floatingPage element to floatingPage on top of the other two - this is the whole point of site design. How can I keep this effect, but not prevent it from starting the page, without JS?

+4
source share
4 answers

Try the following:

 .floatingPage { position : absolute; top : 50px; bottom : 50px; overflow : auto; }
+1
source

Have you tried absolute positioning with the bottom and not the top of the .floatingPage element?

eg:

 .floatingPage { position:absolute; bottom:10px; }
0
source

If you want the element to float on top of the other two, try adding a z-index and using overflow.

here's jsfiddle: http://jsfiddle.net/k8w79/

0
source

Have you tried to use the overflow attribute and set the height of the DIV?

-1
source

Source: https://habr.com/ru/post/1439275/

More articles:


All Articles