刪除主內容和粘滯頁腳之間的空白

我使用粘滯頁腳，並且它一直向下推過瀏覽器高度，導致我的主內容和頁腳之間出現大量空白。當我使用Firefox的inspect元素工具時，它看起來完全是我想要的，刪除了空白區域。刪除主內容和粘滯頁腳之間的空白

我也有一個我使用的叫做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; 
}

來源

2013-08-05 Steven

哪裏是'.push' div的CSS？ – Vector

它被認爲是最後一個.footer類。我修好了，我正在搞這個，試圖修復我的問題 – Steven

設置頁腳爲'height：70px;' – Vector

的#wrapper指定的div當前被設置爲100％的最小高度;請嘗試刪除該聲明，因爲它可能導致主要內容成爲整個瀏覽器窗口的最小大小，這自然會將所有其他內容推送到窗口下方。

來源

2013-08-05 21:15:57 moberemk

這推動了頁腳，但它使它不再是一個粘性頁腳，即頁腳不會停留在頁面的底部。 – Steven

我會建議刪除min-height: 100%;，而不是添加background-color: #525454;到CSS的CSS。

是這樣的：

html { 
background-color: #525454; 
}

這將填補與顏色頁腳下什麼使得它填補到瀏覽器的末端。

My portfolio reference

，如果你希望你的頁腳是一套高度和停留在底層我也發現了這個鏈接。

Set height footer

來源

2013-08-05 21:38:21

我打算將信息放在頁腳中，並且通過此修復程序，我看不到我能做什麼，因爲我沒有可以與可見頁腳對齊的頁腳div。這是正確的還是我錯過了什麼？ – Steven

你錯過了一些東西，但不用擔心！您仍然有一個頁腳div來存放可能存在的任何信息，或者您可以使用名爲footer的html5標籤。：p這個效果所做的只是當頁面上的頁腳或最後一個結構像元素結束時，它將堆疊在HTML的頂部，使其看起來像一個元素。如果頁腳只是一個顏色元素，則不需要擔心，但是如果使用可重複的模式，則需要確保頁腳高度與圖像的大小相同，或者與html圖像重複。 –

刪除主內容和粘滯頁腳之間的空白

回答

相關問題