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 { min-height: 100%; padding-bottom: -4em; }

これにより、Chrome での問題が解決するはずです。

于 2012-11-30T11:30:52.407 に答える