CODEWITHSUNDEEP
htmlcss
Ravimallya
Ravimallya

Reputation: 6610

Fixed footer with 100 height absolute position body and jquery scroll menu

I'm creating a new website with 1024 width framework. I need 100% width top header, header, menu and 100% width of footer. But I need 1024 px width content placeholder. I'm trying to set 100% height content. Say, if the content placeholder has less content, the footer need to stick to the bottom of the page, and if the content placeholder has more content the entire page need to be scrolled. here is the code sample:

<div style="width: 100%; height: 30px; background: #dddedf url('Images/top-header-bg.png') repeat-x top left;position: relative;">
<div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Top Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 100px; background: #fff url('Images/header-bg.png') no-repeat center center;
    position: relative;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 30px; background: #0D9B8C url('Images/menu-bg.png') repeat-x top left;
    position: fixed;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
            <div style="width: 100%; height: 30px;">
                    <!--Menu Section-->
            </div>
        </div>
    </div>
</div>

<div style="width: 100%; position: fixed; top: 160px; height: 100%; margin-bottom: -40px;">
    <div style="width: 1024px; margin: 0 auto; background: #fff url('Images/body-bg.png') repeat-x fixed top left;
        height: 100%;">
        <div style="padding: 0 10px;">
<!--Main Content Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 40px; background: #dddedf url('Images/footer-bg.png') repeat-x bottom left;
    position: fixed; bottom: 0;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
               <!--Footer Section-->
        </div>
    </div>
</div>

I need to set the main content placeholder absolute position because of the jquery scroll menu. If i set relative position, the text inside the main content placeholder gets wrapped while accessing the menu. For more details about this problem, please refer to this question.

Here is a demo and this is the jsfiddle for the same. Did I do something wrong? Solutions and suggestions are most welcome.

Thanks in advance.

Upvotes: 0

Views: 737

Answers (1)

Ollie
Ollie

Reputation: 544

Perhaps consider using Twitter's bootstrap? It's great for responsive designs, and fixing elements to the top and bottom of pages.

http://twitter.github.com/bootstrap/

Upvotes: 1

Related Questions