2

我有以下 HTML（也在http://jsfiddle.net/pHXSJ/）。在 IE 和 Firefox 中，它按预期工作。但是，Chrome 和 Safari 无法将页脚正确定位在视口底部。我已经尝试了这里建议的很多东西，包括从 cssstickyfooter.net 实现。虽然这些技术有效，但一旦我尝试提供（在示例中）绿色侧栏颜色，它们就会开始失败。请注意，这些侧边栏没有内容。

 <!DOCTYPE html>
<html>
    <head>
        <title>2012 test</title>
        <style>
            html,body,form {height: 100%;}
            body,p{margin:0}
            div#wrapper {height:100%;background-color: transparent;}
            div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;}
            div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;}

            div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;}
            div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;}
            div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;}
        </style>
    </head>
    <body style="background-color:green;">
        <form>
            <div id="wrapper">
                <div id="contentwrap">
                    <div id="content">
                        <div style="padding-top: 3.5em;">
                            <div id="lcol" style="float:left;position:relative; width:38%">
                                <p>Left</p>
                            </div>
                            <div id="rcol" style="float:right; position:relative; width:60%;">
                                <p>Right 1 total of 35</p>
                                <p>Right</p>
                                <p>Right</p>
                                <p>Right</p>
                                <p>Right 5</p>
                                <p>Right</p>
                                <p>Right</p>
                                <p>Right</p>
                                <p>Right</p>
                                <p>Right 10</p>
                            </div>
                            <div style="clear:both;position:relative;">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="header">
                    <div>Main Header</div>
                </div>
                <div id="header2">
                    <div>Header level 2</div>
                </div>
            </div>
            <div id="footer" style="">
                <div>Footer text</div>
            </div>
        </form>
    </body>
</html>
4

1 回答 1

0

如果我查看您的 CSS，则缺少此部分：

div#wrapper { 最小高度：100%; 底部填充：-4em；}

这应该可以解决您在 Chrome 中的问题。

于 2012-11-30T11:30:52.407 回答