Joomla模板 - 保留頁腳底部

我試圖做到這一點：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 但我不能自己做，所以我要求你的幫助。Joomla模板 - 保留頁腳底部

我使用這個代碼的模板（頁腳部分只）：

的index.php：

<div class="rt-footer-surround"> 
    <div class="rt-container"> 
     <div class="rt-footer-inner"> 
     <?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?> 
     <div id="rt-footer"> 
      <?php echo $gantry->displayModules('footer','standard','standard'); ?> 
      <div class="clear"></div> 
     </div> 
     <?php /** End Footer **/ endif; ?> 
     <?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?> 
     <div id="rt-copyright"> 
      <?php echo $gantry->displayModules('copyright','standard','standard'); ?> 
      <div class="clear"></div> 
     </div> 
     <?php /** End Copyright **/ endif; ?> 
     </div> 
    </div> 
</div>

CSS/template.css：

/* Footer */ 
.backgroundlevel-high .rt-footer-surround {padding-top: 135px;} 
.rt-footer-inner {border-radius: 5px 5px 0 0;position: relative;z-index: 0;margin: 0 10px;} 
.rt-footer-inner:after {content: "";position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;border-radius: 5px;} 
.rt-footer-inner .rt-alpha {margin-left: 0;} 
.rt-footer-inner .rt-omega {margin-right: 0;} 
.backgroundlevel-high #rt-bottom {margin-bottom: -50px;} 
#rt-bottom {margin-bottom: 15px;} 
#rt-footer, #rt-copyright {margin: 0 -2px;} 
#rt-copyright {position: relative;} 
#rt-copyright .rt-grid-1, #rt-copyright .rt-grid-2, #rt-copyright .rt-grid-3, #rt copyright .rt-grid-4, #rt-copyright .rt-grid-5, #rt-copyright .rt-grid-6, #rt-copyright 
.rt-grid-7, #rt-copyright .rt-grid-8, #rt-copyright .rt-grid-9, #rt-copyright .rt-grid 10, #rt-copyright .rt-grid-11, #rt-copyright .rt-grid-12 {position: static;}

CSS /社區a.css：

/* Footer */ 
.rt-footer-inner {background-color: #1CA8D2;box-shadow: inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.4);color: #fff;text-shadow: 1px -1px 1px rgba(0,0,0,0.5);} 
.rt-footer-inner .module-surround, .rt-footer-inner .title {color: #fff;text-shadow: 1px -1px 1px rgba(0,0,0,0.5);} 
.rt-footer-inner a {color: #BCFEFF;text-shadow: -1px -1px 1px rgba(0,0,0,0.3);} 
.rt-footer-inner a:hover {color: #fff;}

The 「community-a.css」是我使用的模板中的樣式表。

如果有人能幫我解決這個問題，我會很高興。

來源

2013-07-02 FreDe

請創建[的jsfiddle（http://www.jsfiddle.net） – screenmutt

我是一個新手來此，但：http://jsfiddle.net/z6D3J/ – FreDe

我剛剛添加了.css文件的其餘部分：http://jsfiddle.net/z6D3J/1/ – FreDe

與你在這裏所提供的信息是我的兩分錢：

在介紹之後，你應該應用下列CSS規則的容器元素（應該是RT-頁腳環繞）：

.rt-footer-surround { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
}

這應該是非常重要的，但是你應該檢查是否有其他一些CSS規則試圖覆蓋你正在做的修改，螢火蟲或其他開發者工具對於這類東西來說是很棒的。

編輯：這樣的事情http://jsfiddle.net/4PRmk/1/

來源

2013-07-02 12:57:27 speyburn

通過將此添加到「backgroundlevel-high .rt-footer-surround」，我將它移動到頁面的按鈕。我現在嘗試格式化它看起來是正確的，但我可能認爲它發揮了訣竅:) – FreDe

好吧，現在它停留在buttom，但然後我得到一個新問題.. 當我有一個頁面很多內容，我無法滾動，但內容隱藏在fotter後面。 – FreDe

當我將位置設置爲「相對」時，它可以在包含大量內容的頁面上工作，但是當它設置爲「絕對」時，它適用於頁面上的內容很少，並且大小重疊。這裏是.css代碼：http://jsfiddle.net/z6D3J/2/ – FreDe

Joomla模板 - 保留頁腳底部

回答

相關問題