0

スティッキー フッターを使用していますが、ブラウザーの高さを超えて押し下げられ続け、メイン コンテンツとフッターの間に大量の空白が表示されます。しかし、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;
}
4

2 に答える 2

0

min-height: 100%;を削除して、代わりbackground-color: #525454;に css の html に追加することをお勧めします。

次のようになります。

html  {
background-color: #525454;
}

これにより、フッターの下のすべてがその色で塗りつぶされ、ブラウザーの最後まで塗りつぶされます。

私のポートフォリオ参照

フッターを設定した高さにして下部に固定したい場合は、このリンクも見つけました。

高さフッターを設定する

于 2013-08-05T21:38:21.627 に答える