頁腳不低於內容

我的頁腳似乎不想坐在我的.wrapper下面。頁腳不低於內容

最接近我得到它從頁面頂部解除它自己，是告訴它是bottom: 0px，但它然後坐在頁面中間笨拙。

clear:both也沒有工作。

我很擔心它可能是jssor JavaScript中的一些東西，這些東西都搞亂了。

#slider1_container { 
 
    position: absolute; 
 
    float: right; 
 
    top: 50px; 
 
    left: 40%; 
 
    width: 60%; 
 
    height: 900px; 
 
    background: #333; 
 
    overflow: hidden; 
 
} 
 
.wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    background-color: #404041; 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -142px; 
 
} 
 
footer { 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    background-color: #feede4; 
 
    height: 250px; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div id="slider1_container"> 
 
     <!-- Loading Screen --> 
 
     <div class="loading" u="loading"> 
 
     <div class="loadingStyle1"></div> 
 
     <div class="loadingStyle2"></div> 
 
     </div> 
 
     <!-- Images --> 
 
     <div u="slides" class="slides"> 
 
     <div> 
 
      <img u="image" src="images/hotel/full/image-29.jpg" /> 
 
      <img u="thumb" src="images/hotel/thumbnail/image-29.jpg" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="images/hotel/full/image-30.jpg" /> 
 
      <img u="thumb" src="images/hotel/thumbnail/image-30.jpg" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="images/hotel/full/image-31.jpg" /> 
 
      <img u="thumb" src="images/hotel/thumbnail/image-31.jpg" /> 
 
     </div> 
 
     <div> 
 
      <img u="image" src="images/hotel/full/image-32.jpg" /> 
 
      <img u="thumb" src="images/hotel/thumbnail/image-32.jpg" /> 
 
     </div> 
 
     <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="top: 158px; left: 248px;"> 
 
       </span> 
 

 
     <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px"> 
 
       </span> 
 

 
     <!-- thumbnail navigator container --> 
 
     <div u="thumbnavigator" class="jssort02" style="left: 0px; bottom: 0px;"> 
 
      <!-- Thumbnail Item Skin Begin --> 
 
      <div u="slides" style="cursor: default;"> 
 
      <div u="prototype" class="p"> 
 
       <div class=w> 
 
       <div u="thumbnailtemplate" class="t"></div> 
 
       </div> 
 
       <div class=c></div> 
 
      </div> 
 
      </div> 
 
      <!-- Thumbnail Item Skin End --> 
 
     </div> 
 
     </div> 
 
     <div class="push"></div> 
 
    </div> 
 
    <footer>jasoldk;as'dlas'd</footer> 
 
    </div> 
 
</body>

http://jsfiddle.net/cowc1uv1/

來源

2015-07-20 PacificFrost

我認爲這是因爲您使用絕對定位（抵消頁腳），使用代碼的一個簡短部分創建JSFiddle，這會重新創建您的問題，這樣我們可以直接進行交互並嘗試修復代碼 - http： //jsfiddle.net –

對不起，道歉的傢伙。我弄清楚了答案，@ nabrown78發現這是一個定位衝突。我需要刪除定位並添加一個clearfix。 – PacificFrost

你有兩種風格上#slide1_container造成麻煩：

#slider1_container{ 
    position: absolute; 
    float: right; 
    top: 50px; 
    left: 40%; 
    width: 60%; 
    height: 900px; 
    background: #333; 
    overflow: hidden; 
    }

有浮動和絕對定位的東西沒有意義。但是任何一個都會導致佈局中的下一個元素出現問題。如果您絕對定位某個東西，則可以從佈局流程中完全刪除它。所以，對於後面的元素，它實際上沒有高度（所以你的頁腳出現在頂部）。如果浮動元素，則必須「清除浮動」。一種方法是在容器元素上使用clearfix。您還需要從腳註中刪除position:absolute。

您的標誌和顏色看起來不錯...如果您瞭解一些基本的CSS佈局技巧，特別是how the various values for position really work，您將節省自己的挫折感和時間來構建您的網站。

來源

2015-07-21 00:14:19 nabrown78

啊！ clearfix是真正的CSS黑客之神。它工作完美。不知何故，它甚至修復了JS盒的容器。（我把腳註移到了''外面。slider1_container'所以現在我從'.wrapper'和'.slider1_container'中刪除了定位，最後它工作。另外，非常感謝您對設計的評論。 CSS佈局技術是迄今爲止我遇到的最大問題，所以我將不得不回到起點，看看我是否錯過了任何東西。再次感謝！ – PacificFrost

隨着position: absolute和bottom: 0，當你在你的問題提了，你footer元素確實下降到其絕對定位的容器（div class="wrapper"）的底部，因爲它應該。

您遇到的問題與頁腳下方的剩餘間隙有關，您的問題涉及您的div id="slider1_container。請參閱height: 1046.51955032362px和position: absolute屬性。嘗試在Chrome開發人員工具（或您使用的任何瀏覽器的代碼檢查器）中將其關閉，然後將您的<footer>塊下降到屏幕的實際底部。

請記住，position: absolute中的元素相對於其最近的定位祖先或初始容器（如果沒有的話）定位。它不一定將元素放置在視口的底部。

根據您打算如何使用JS滑塊，您可能需要使用高度和絕對定位值（top & left）來滿足您的需求。

來源

2015-07-21 00:25:35

最後一段確實幫助了@ nabrown78的迴應帶來的影響。謝謝！ - 我必須重新配置高度和重量，因爲百分比似乎導致問題。 – PacificFrost

頁腳不低於內容

回答

相關問題