Home/ Questions/Q 8776045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T18:57:22+00:00

I have an issue with my web page. Basically, I have the <html> on

  • 0

I have an issue with my web page.

Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.

Edit: The container div has the overflow: auto property.

The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it’s taken to a laptop, the last 1-2 rows become ‘hidden’ due to html overflow.

If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.

Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest and probably the fastest way to do it would be using Javascript.
    If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.

    When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:

    function resizeMain()
{
    $('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}

// size it on load:
$(function(){
    resizeMain();
}

// and size it on resize
$(window).resize(resizeMain);

    Of course, many ways to optimize this, but that’s the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.

    Finally, you need Overflow: auto; on our tabular box

    • 0