No proper scrolling in webpage

Question

I wrote a website as shown here.
Code is:

<div id="mainDiv" class="container">
        <div id="header">
            <div class="plc">
                <h1><a href="#"></a></h1>
                <nav>
                    <div id="navPos">
                        <div style="position: relative;right: 113px;">Register</div>
                        <div style="position: absolute;right: 255px;top: 37px;">Login</div>
                        <div style="position: absolute;top: 38px;right: 123px;">Market</div>    
                    </div>
                </nav>
            </div>
        </div>
        <div id="body" class="container-fluid">
            <div id="container">
                <div id="overlay"></div>
                <div id="menu"></div>
                <div id="formPos"></div>
                <div id="or">OR</div>
                <div id="fbReg">
                    <img src="images/fbOne.png" id="fbIcon">
                    <div id="fbPos">Register with Facebook</div>
                </div>
                <div id="gReg">
                    <img src="images/gPlus.jpg" id="gIcon">
                    <div id="gPos">Register with Google</div>
                </div>
                <div id="cliPos">
                    <img src="images/Bistip-in-media.png" id="imgCli">
                </div>
            </div>
        </div>
        <div id="footer">
            hello
        </div>
    </div>  

CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it? For best results, expand the output window of jsfiddle

Answer 1

Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'

In your Case:

1) Remove overflow:hidden; or overflow:auto; 2) If you do not want scroll in your content(i.e. portion excluding header & footer)

DEMO

CSS

html,body
{
  overflow:auto; /* Or just REMOVE overflow*/
}


#body
{
  overflow:auto; /* Or just REMOVE overflow*/]
}