1

divの水平レイアウト用にこのコードがありますが、下部に固定する必要があるフッターを追加すると、水平スクロールバーが消えます。

また、コンテナとフッターの高さと幅は、ブラウザウィンドウを補完するものである必要があります。

これが私のコードです：

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Project</title>

        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div id="wrap">

        <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        </div><!-- end CONTAINER -->

        </div><!-- end WRAP -->

        <div id="footer">
        <ul id="nav">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        </ul>
        </div><!-- end FOOTER -->

        <!-- JAVASCRIPT -->
        <script type='text/javascript' src='js/jquery-1.6.js'></script>
        <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
            $(function(){
                var width = 0;
                $('#wrap .container div').each(function() {
                width += $(this).outerWidth( true );
            });
            $('#wrap .container').css('width', width + "px");
        });
        });//]]>  
        </script>

    </body>
</html>

CSS

html, body {
height: 100%;}

body:before,#wrap:before{content:'';float:left;height:100%;margin-top:-999em;} 

#wrap{
min-height: 100%;
margin:0 auto;
width:100%;
overflow-x:scroll;overflow-y:hidden;
background-color: red;}

#wrap:after {
content:'';
height:200px;
display:block;
clear:both;}

#wrap .container{  }
#wrap .container div{
border:1px solid #CCC;
float:left;
width:200px;
height:200px;}

#footer{
margin:-200px auto 0;
height:200px;
width:100%;
background-color: blue;}

ul#nav{list-style-type: none;margin:0;padding: 0}
ul#nav li{display: inline;}

これがdフィドルです http://jsfiddle.net/MsF59/1/

スティッキーフッターは http://www.websitecodetutorials.com/code/css/css3-sticky-footer.php（METHOD 2）から取得されました

フッターのdの負のマージンはそれを消すと思いますが、それがないとフッターはdの下部にくっつきません。

dの問題は基本的にどこにありますか？

4

0 に答える 0