开发者

CSS body height not behaving in Firefox?

开发者 https://www.devze.com 2023-04-13 00:38 出处:网络
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

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 with height: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%;}

0

精彩评论

暂无评论...
验证码 换一张
取 消