Home/ Questions/Q 6582007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:13:36+00:00

I have been told to use JS to resolve my issue: My issue is

  • 0

I have been told to use JS to resolve my issue:

My issue is that I have 2 divs content and sidebar with the height set to 100%, I have a footer located underneath.

My issue is that on my laptop I would like the page to show without a scroll and on a full page3, if there is more data the page will then require a scroll.

How could I set the div height determined to my screen resolution?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this in pure HTML/CSS – no JavaScript required.

    What you’re after is a cross-browser sticky footer.

    The following is derived from http://www.cssstickyfooter.com/:

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
            }

            #wrap {
                min-height: 100%;
            }

            #main {
                overflow:auto;
                padding-bottom: 150px; /* must be same height as the footer */
            }

            #footer {
                position: relative;
                margin-top: -150px; /* negative value of footer height */
                height: 150px;
                clear:both;
            } 

            /*Opera Fix*/
            body:before {
                content:"";
                height:100%;
                float:left;
                width:0;
                margin-top:-32767px;/
            }
        </style>
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                <div id="content">
                    <!-- Main content here -->
                </div>
            </div>
        </div>
        <div id="footer">
            <!-- Footer content here -->
        </div>
    </body>
</html>

    You can see a working example here: http://jsfiddle.net/dZDUR/

    Resize the right-hand “Result” pane to be shorter/taller than the text to see the scroll bar appear / disappear.

    As per the CSS Sticky Footer how-to, you can insert your normal ‘column’ layout inside the main div.

    • 0