Question

我在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;}

这里是小提琴 http://jsfiddle.net/MsF59/1/

粘性页脚取自 http://www.websitecodetutorials.com/code/css/css3-sticky-footer.php（方法2）

我认为页脚的负边距会使其消失，但如果没有它，页脚就不会粘到底部。

基本上是d问题？

水平布局 - 粘性页脚隐藏水平滚动条

0 个答案: