删除主要内容和页脚之间的空白

Question

I'm using a sticky footer and it keeps being pushed down past the browser height, causing a large amount of whitespace to appear between my main content and the footer. 我使用的是粘性页脚，并且一直被压低到超过浏览器高度，导致在我的主要内容和页脚之间出现大量空白。 When I use Firefox's inspect element tool however it appears exactly how I want it, removing the white space. 但是，当我使用Firefox的inspect element工具时，它确实显示了我想要的样子，删除了空白。

I also have a jQuery slider I'm using called nivoslider but I don't think that's having any affect on it. 我还有一个正在使用的jQuery滑块，称为nivoslider，但我认为这没有任何影响。

Any suggestions? 有什么建议么？

HTML 的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 的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

The #wrapper div is currently set to be a minimum height of 100%; 目前#wrapper div的最小高度为100％； try removing that declaration, as it is likely causing the main content to be a minimum size of the entire browser window, which will naturally push all other content below the window. 请尝试删除该声明，因为这很可能导致主要内容成为整个浏览器窗口的最小尺寸，这自然会将所有其他内容推到窗口下方。

Answer 2

I would recommend removing the min-height: 100%; 我建议删除min-height: 100%; and instead adding background-color: #525454; 而是添加background-color: #525454; to the html in css. 到CSS中的html。

Looks like this: 看起来像这样：

html  {
background-color: #525454;
}

This will fill anything under the footer with that color making it fill to the end of the browser. 这将用该颜色填充页脚下的所有内容，使其填充到浏览器的末尾。

My portfolio reference 我的投资组合参考

I also found this link if you want your footer to be a set height and stay at the bottom. 如果您希望页脚为设定的高度并保持在底部，我也找到了此链接。

Set height footer 设置高度页脚

删除主要内容和页脚之间的空白

问题描述

2 个解决方案

解决方案1
0 2013-08-05 21:15:57

解决方案2
0 2013-08-05 21:38:21

删除主要内容和页脚之间的空白

问题描述

2 个解决方案

解决方案1 0 2013-08-05 21:15:57

解决方案2 0 2013-08-05 21:38:21

解决方案1
0 2013-08-05 21:15:57

解决方案2
0 2013-08-05 21:38:21