Question

我有以下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>

Answer 1

如果我看你的css，那部分就丢失了：

div＃wrapper {min-height：100％; padding-bottom：-4em; }

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

CSS粘滞页脚左/右侧不同的背景颜色

1 个答案: