dimanche 10 mai 2015

Header, Nav, Container Layout without vertical scroll bar on entire page

I am having a hard time with CSS. I'm trying to create a Header, Side Nav Bar and Content Pane. Below is what I need.

 --------------------------------------------------------------------------
| Header                                                                   |
 --------------------------------------------------------------------------
| Nav             | Content                                                |
|                 |                                                        |
|                 |                                                        |
|                 |                                                        |
 --------------------------------------------------------------------------

I have attempted to create this, but for some reason there is a scroll bar on the side making the header appear and disappear as I scroll.

The only thing that needs a scroll bar is the content pane.

Both the Nav and Content needs extend all the way to the bottom of the browser.

Here is my attempt:

        #header{
            background-color:#000000;
        } 

        #nav {
            background-color:#ff6a00;
            width: 220px;
            float:left;       
            min-height: 100% !important;         
        }

        #section {
            background-color:#808080;
            min-height: 100% !important;
            float:left;   
        }

        .scrolling-wrapper {
            width: auto;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            overflow-y: auto;
        }

Here is the HTML:

    <div class="body-wrapper">

        <div id="header">
            asdasd
        </div>

        <div id="nav">
            asdasd
        </div>

        <div id="section">
            <div class="scrolling-wrapper">
                adasd
                @RenderBody()
            </div>
        </div>

    </div>

Everything needs to auto adjust, for example the header can be any height so nav and content needs to compensate for that. I hope that makes sense.

Can anyone please point me into the right direction to remove the scroll bar so that the 3 containers fits perfectly in the browser?

Thank you in advance.

Aucun commentaire:

Enregistrer un commentaire