Question

我正在使用粘性页脚并且它一直被推下超过浏览器高度，导致我的主要内容和页脚之间出现大量空白。当我使用Firefox的检查元素工具时，它显示我想要的方式，删除空格。

我还有一个名为nivoslider的jQuery滑块，但我认为它对它没有任何影响。

有什么建议吗？

HTML

<!DOCTYPE>
<html>
<head>

    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <title>Page Title</title>

    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen">

    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider({
                effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
                animSpeed: 400, // Slide transition speed
                pauseTime: 5000, // How long each slide will show
                startSlide: 0, // Set starting Slide (0 index)
                directionNav: true, // Next & Prev navigation
                controlNav: false, // 1,2,3... navigation
                controlNavThumbs: false, // Use thumbnails for Control Nav
                pauseOnHover: false, // Stop animation while hovering
                manualAdvance: false, // Force manual transitions
                prevText: 'Last', // Prev directionNav text
                nextText: 'Next', // Next directionNav text
            });
        });

    </script>

</head>

<body>

<div id="header">

        <div class ="title">
            <a href="#"><img src="res/title.png" id="title-img" alt=" "></a>
        </div>

        <div class="navbar">
            <div class="navbar_inner">
                <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">Events</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Contact</a></li> 
                </ul>
            </div>
        </div>
    </div>



    <div id="wrapper">

        <div id="content">


            <div id="column-left" class="column">
                <p>text text text text text text TEXT</p>
            </div>

            <div class="C-wrapper">

                <div id="column-right" class="column">
                     <p>text text text text text text TEXT</p>
                </div>

                <div class="slider-wrapper">

                    <div id="slider" class="nivoSlider">
                        <a href="#"><img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" /></a>
                        <a href="#"><img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" /></a>
                        <a href="#"><img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" /></a>
                    </div>
                </div>

                <div id="caption1" class="nivo-html-caption">
                    <h3>Title</h3>
                    <p>text text text text</p>
                </div>

                <div id="caption2" class="nivo-html-caption">
                    <h3>Title</h3>
                    <p>text text text text text</p>
                </div>

                <div id="caption3" class="nivo-html-caption">
                    <h3>Title</h3>
                    <p>text text text text text</p>
                </div>

                <div id="column-center">
                    <p>text text text text text text TEXT</p>
                </div>
            </div>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer">

    </div>
 </body>

CSS

*{
margin:0;
padding:0;
text-decoration:none;   
}

html{
height: 100%;
}

body{
height: 100%;
min-height: 100%;
background:#1010bf url(../res/bg/bg-hex.png);   
}

#header{
margin: 0 auto;
width: 100%
margin-top: 10px;   
}

.title{
margin: 0 auto 0 auto;
position: relative;
width: 50%;
}

.navbar{
margin-top: 20px;
margin-bottom: 35px;
padding-top: 10px;
position: relative;
min-height: 30px;
width: 100%;
background: #525454;
float: left;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-bottom-style: solid;
}

.navbar_inner{
margin: 0 auto;
width: 50%;
}

.navbar .navbar_inner ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 10px 40px;
display: inline;    
}

.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #059695;
}

.navbar a:visited{
color: #059695;
text-decoration: none;
font-weight: bold;
}

.navbar a:active{
text-decoration: none;
font-weight: bold;
}

.navbar a:hover{
text-decoration: none;
font-weight: bold;
color: #00f7ff;
}

.navbar a:focus{
text-decoration: none;
font-weight: bold;
padding: 40px 40px;
color: #00f7ff;
}


#wrapper{
margin: 0 auto -75px auto;
width:1100px;
min-height: 100%;
height: auto !important;
height: 100%;
}

#content{
margin: 0 auto 0 auto;
clear: both;
}

.column{
background-color: #fff;
width: 250px;
height: 500px;
}

#column-left{
float: left;
}

#column-right{
float: right;
}

#column-center{
margin: 10px 30px;
float: left;
width: 540px;
height: 240px;
background-color: #fff; 
}

.C-wrapper{
clear: right;
position: relative;
}

.slider-wrapper{
margin: 0 auto;
width: 540px;
border-style: solid;
border-color: #000;
border-width: 5px;
}

.footer{
background-color: #525454;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;    
}

.footer, .push{
clear: both;
height: 70px;
}

Answer 1

#wrapper div目前设置为最小高度100％;尝试删除该声明，因为它可能导致主要内容成为整个浏览器窗口的最小大小，这自然会将所有其他内容推送到窗口下方。

Answer 2

我建议删除min-height: 100%;，然后将background-color: #525454;添加到css中的html。

看起来像这样：

html  {
background-color: #525454;
}

这将填充页脚下的任何颜色，使其填充到浏览器的末尾。

My portfolio reference

如果您希望您的页脚设置为设置高度并保持在底部，我也找到了此链接。

Set height footer

删除主要内容和粘性页脚之间的空白区域

2 个答案: