Help with doctype issues
I am having issues making my footer stick to the bottom of the page in all browsers.
I have the following document structure:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
</ul>
</div>
<div class="expander"></div>
</div>开发者_如何学Go
<div id="footer" class="expander">
</div>
</body>
</html>
Relevant CSS is:
body
{
margin: 0;
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -116px;
}
.expander
{
height: 116px;
}
#footer
{
width: 100%;
}
#header ul
{
list-style: none outside none;
clear: both;
margin: 0;
}
#header li
{
margin: 0;
margin-right: 20px;
padding: 0;
display: inline-block;
height: 85px;
padding-top: 20px;
margin-bottom: -20px;
}
When used without any doc type, the page renders as I intend it to in Chrome and Firefox. In IE8, however, the list item tabs are on separate lines
When I add an XHTML doctype, the page renders correctly in IE8 except the footer is not drawn at the bottom of the page in IE8, Chrome or Firefox, i.e. the footer sits directly below the menu bar.
Example doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
What am I doing wrong?
Testing with the DOCTYPE in the code:
Changing:
body
{
margin: 0;
height: 100%;
}
to:
html, body
{
margin: 0;
height: 100%;
}
fixes it for me.
You need to let the footer stay at the bottom of the page i.e.
body, html{
margin:0;
height:100%;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
}
Note: this solution is thought to avoid wrapper height tricks/problems
In addition to using the wrong doctype, as I mentioned above, changing or removing doctypes is never an option. Essentially, it's the set of rules you are telling the browser you are using to create the page. You can't be changing the rules in midstream or on a whim. Change/remove the doctype, change the rules.
Never, EVER use IE as a reference for how things work. Inept at best, it's a decade or more behind all others in modern standards and compliance. If it's working in FF and Chrome then your markup is most likely correct.
Life has just called and I hope to give more info later.
加载中,请稍侯......
精彩评论