Basically i have a div on my main page that contains the content, now when the content goes over the bottom of the page so the user has to scroll down to view the lower half of the content everything works as it should.
That is with body { height:auto; }
, however when this div only has content that can be viewed without scrolling there is a problem with body { -moz-box-shadow:inset 0 0 10px #33333; }
meaning that the shadow开发者_开发知识库 comes half way up the page.
It is hard to explain so just have a look for your self:
http://middle.dyndns-server.com/index.html
This page has the content extending the dive so height:auto works
and
http://middle.dyndns-server.com/schedule.html
This page does not have the content so the inner shadow doesn't work properly in firefox. I can correct this withheight:100%
but then the same happens to the index.
Thanks a lot
You need to add doctype first
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
css
html,body{
min-height:100%;
}
#page{
min-height:100%;
}
Checkout the below links:
http://balam.in/personal/stackoverflow/schedule.html
http://balam.in/personal/stackoverflow/index.html
You need to put the style declaration inside head tag or in the attached external stylesheet
<style>
html,#page,body{
min-height:100%;
}
</style>
Try adding a rule to the #page declaration: #page{min-height:100%;}
And one to the Body delcaration: body{height:100%;}
精彩评论