CSS: Div element overscrolling despite lack of margin or padding

Question

This is a continuation of my earlier issue (Extending body to cover z-indexed footer when there isn't enough content - which is now solved using css3 height calc as well as the answer provided) whereby the #mainbody element is scrolling past where it should be. I've set a bottom margin of 365px:

.mainbody{
    [...]
    margin-bottom: 365px;
}

as that is the height of the footer it is covering, but for some reason it keeps scrolling higher despite the fact there is no other margin, padding or content pushing it up - Chrome's computed box model in the code inspector is also confirming this for me. I have also removed the margin-bottom line of code and the same thing is still happening.

You can have a look at the code and example here: http://stackoverflow.adamrapley.com/

Thanks :)

Additional code that highlights the area that's not doing what it should:

html,body,#mainbodyholder{
    height: 100%;
}

#mainbodyholder{
position: relative;
position:0;
}


#mainbody{
transition: all 50ms;
padding: 0 10%;
height: 100%;
}

.mainbody{
position: relative;
top:0;
min-height: -webkit-calc(100% - 220px);
min-height: -moz-calc(100% - 220px);
min-height: -o-calc(100% - 220px);
min-height: calc(100% - 220px);
background: #E2E2E2 url('../img/ticks.png');
padding-bottom: 20px;
margin-bottom: 365px;
box-shadow: 0px 0px 30px 0px #000000; 
padding-top: 220px;
z-index: 2;
}

and the HTML:

<div id="mainbodyholder">
    <div class="mainbody container">
        <h1 class="title">Title</h1>
        <div id="mainbody">
            <p>Content</p>
        </div>  
    </div>
</div>

The whole thing is relevant really because I don't know which part of the code is causing the thing to act unusually? I'll post some that might be helpful though, maybe? — admrply, Jan 07 '14 at 13:38

Dipak · Answer 1 · 2014-01-07T14:05:32.863

0

after declaring some float values to div i.e. or

you must clear it before closing the parent div.

<div style="clear:both;"></div>

edited Jan 07 '14 at 14:05

answered Jan 07 '14 at 13:36

Dipak

115
1
9

I thought the float values would only apply to the header saying as they are declared as such in the css with `header ul` and `header li`? – admrply Jan 07 '14 at 13:45
If you want to hide footer call some java script to change the style of
on which page you don't want to show the div call
– Dipak Jan 07 '14 at 13:49
Refer this link for better clarification [link](http://stackoverflow.com/questions/20947996/replace-and-display-a-new-page-after-value-getting-selected-from-dropdown-in-jsp/20948617#20948617) – Dipak Jan 07 '14 at 13:54
@Dipak : where is the `float`used in the above code??have you posted the answer, referencing from the live url????? – NoobEditor Jan 07 '14 at 13:58
It's not that I don't want to show the footer, I want the footer to be on every page but the footer sits behind the main body and when you reach the bottom of the page, the main body lifts up to reveal the footer. The issue I was having before was that the main body wasn't extending to the bottom of the page if there wasn't enough content. It always covers the footer now, but the problem now is that it is scrolling too far up and instead of just scrolling to the top of the footer, it is scrolling past it. – admrply Jan 07 '14 at 13:59

CSS: Div element overscrolling despite lack of margin or padding

1 Answers1