Member Avatar for tabj

I need a help?
I m designing a webpage. I have used <div>s everywhere, from header to footer, moreover I have used relative positioning with top and right tag. Somewhere top value has gone -1200 and so. At last I m left with about 800px of useless area below the footer and I don't want that. I looks very disgusting.Is there anyway of removing those whitespaces or stopping scroll below the footer block????

I there anyone for rescue??
HELP HELP HELP!!!!!!!!!!!!!!!

  • 5 Contributors
  • 6 Replies
  • 869 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

A short expert note tied to the replies above.

A very common root cause for the extra gap described by is using lots of relative offsets for layout. Relative positioning moves an element visually but keeps its original space in the document flow, so visually moved blocks still contribute to page height and can leave a big blank band below the footer. Switching the footer or the offending elements to absolute can hide the symptom (absolute removes the element from flow) but converting everything to absolute is fragile and breaks responsiveness. 's absolute bottom:0 approach can work for a fixed footer, but it is not the safest general solution.

Quick debugging steps to find the culprit:

  • Open DevTools, inspect elements and check computed position and top values.
  • Run this small console script to list relative elements with non-zero top offsets:
Array.from(document.querySelectorAll('*')).forEach(function(el){
  var cs = getComputedStyle(el);
  if (cs.position === 'relative' && cs.top !== '0px' && cs.top !== 'auto') {
    console.log(el, cs.top, el.getBoundingClientRect());
  }
});
  • Temporarily outline all elements to see oversized boxes:
* { outline: 1px dashed rgba(255,0,0,0.2); }

Safer fixes to apply:

  • Remove large top offsets and return to normal flow (use margins/padding instead).
  • For a footer that should sit at the bottom when content is short but follow content when it is long, use a simple Flexbox layout:
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

Final notes: check for bottom margins on the last content child (margin collapse) and ensure any absolutely positioned elements are positioned relative to an intended parent (position: relative on the parent). These steps will find the offending element and give a maintainable, responsive layout rather than masking the problem.

Recommended Answers

All 6 Replies

Member Avatar for Dani

It's really hard for me to wrap my mind around what you're describing. Can you please either link to your page, or provide the full HTML and CSS?

commented: agreed +14
Member Avatar for ome2012

yeah right can you post your code so that we can try to trace the errors....?

Member Avatar for James_Smith

Hi tabj,

For better and clear solution to your query - you have to explain it clearly for that it will be easy to answer it.

Do what Dani says - i.e, mention short of code where you have a problem? or a link for a web page.

Member Avatar for lps

I think the main problem is that the content is long enough and there will be a white space below the footer. Normally we have our footer div set to absolute position and bottom:0 in the case.

Member Avatar for tabj

Thanks everyone for ur reply. Mine problem is solved. Mine problem was that i had used relative positioning everywhere, and thats why I was left with lots of blank spaces at the bottom of my webpage. I rearrange my contents with absolute positioning and now it is working properly.
Again thanks everyone for their precious reply. Next time if I will have any problem then I will try my best to describe the problem clearly and completely.

Member Avatar for lps

Please do mark the thread as 'solved' if the problem have been resolve.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.