Joomla頁腳中部頁面具有100％的高度DIVs

Question

我必須使用Joomla框架並創建100％高度的DIV。我已經成功完成了這項工作然而，當試圖添加頁腳時，它會飛向屏幕頂部並覆蓋所有內容。

通過對DOM的進一步檢查，我發現了一些有趣的東西：由框架類自動添加.item-page和div itemprop =「articleBody」在DOM樹中它們的部分下有所有部分，就像它們應該一樣在高度方面包含第一個DIV。所以看起來我的頁腳正在嘗試適應第一個DIV。

對於記錄，我成功地加載Bootstrap 3.

非常感謝幫助。

HTML - 的index.php

<div class="container-fluid"> 
    <nav class="navbar" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" 
       data-toggle="collapse" 
       data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <jdoc:include type="modules" name="nav" style="html5" /> 
     </div> 
    </nav> 


    <jdoc:include type="message" /> 
    <jdoc:include type="component" /> 

<!--END CONTAINER--> 
</div> 
<footer> 
    <div class="container"> 
     <div class="row footer-container footer-row"> 
      <div class="col-sm-3"> 
       <div class="footer-logo">Logo</div> 
      </div> 

      <div class="col-sm-9"> 
       <p class="footer-about"> 
        About 
       </p> 
       <p class="footer-text"> 
        Footer content here 
       </p> 
      </div> 

      <div class="col-sm-3"> 
       <p class="footer-about"> 
        Contact Info 
       </p> 
      </div> 
     </div> 
    </div> 
    </footer> 

HTML - 在代碼編輯器受影響頁面的

<div class="container-fluid"> 
    <div id="landing-bkg"> 
     <div class="row"> 
      <div class ="col-sm-7 col-xs-12"> 
       <h1>Headline</h1> 
       <h3>Subhead</h3> 
       <div class="btn"> 
        <p>Button</p> 
       </div> 
      </div> 
     <!-- END COL --> 
     </div> 
     <!-- END ROW --> 
    </div> 
    <!-- END LANDING BKG--> 

    <div id="another2"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <h2 class="center">Headline</h2> 
       <h3 class="center">Subhead</h3> 
       <div class="btn btn-center"> 
        <p class="center">Button</p> 
       </div> 
      </div> 
     <!-- END COL --> 
     </div> 
     <!-- END ROW --> 
    </div> 
    <!-- END ANOTHER2--> 

    <div id="another3-bkg"> 
     <div class="row"> 
      <div class="col-sm-12"> 
     <div class="row"> 
        <div class ="col-md-7 col-sm-12 col-xs-12"> 
         <h2>Headline</h2> 
         <h3> Subhead</h3> 
         <div class="btn"> 
          <p>Button</p> 
         </div> 
        </div> 
        <!-- END NESTED COLUMN --> 
       </div> 
       <!-- END NESTED ROW --> 
      </div> 
     <!-- END COL --> 
     </div> 
     <!-- END ROW --> 
    </div> 
    <!-- END ANOTHER3 BKG--> 

    <div id="another4"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <h2 class="center">Subhead</h2> 
       <form> 
        <input type="email" placeholder="Input Field" class="center-block"> 
       </form> 
       <div class="btn btn-center"> 
        <p class="center">Button</p> 
       </div> 
      </div> 
     <!-- END COL --> 
     </div> 
     <!-- END ROW --> 
    </div> 
    <!-- ANOTHER 4 --> 
</div> 
<!-- END CONTAINER --> 

CSS

/****HTML & BODY ****/ 

html, 
body{ 
    width:100%; 
    height:100%; //Makes my DIVs 100% height, works great 
    margin:0; 
    padding:0; 
} 

/****CONTAINER ****/ 
.container-fluid{ 
    100% 
} 

/**** JOOMLA CLASSES I OVER RIDE TO GET THE DIVS AT 100% DOESN'T WORK WITHOUT IT ****/ 
.item-page{ 
    height:100%; 
} 
div[itemprop="articleBody"]{ 
height:100% !important; 
} 


/**** FOOTER ****/ 

.footer-container{ 
    background-color:#565A5C; 
    width:100%; 
    padding-top:50px; 
    padding-bottom:25px; 
} 

footer{ 
    position:relative; 
} 

.footer-row{ 
    width:100% !important; 
    margin:0 !important; 
} 

Answer 1

不是100％確定你想要什麼但是：

footer{ 
    position:absolute; 
    bottom: 0; 
} 

應該正確放置頁腳。然後添加填充 s到其他元素，以避免它們覆蓋頁腳。