2017-06-30 85 views
1

我有一個使用100%高度DIV的佈局。當我添加頁腳時,它會跳到第一個DIV並在其中間的某處浮動。我查看了代碼,看起來.articleBody和item-page是我孩子DIV的父母,但根據檢查員只包裝第一個DIV(所有DIV都在容器中,而DOM樹的100%高度DIV爲兒童)。刪除自動添加包裝在Joomla?

我已經嘗試使用絕對位置,給頁腳一個高度,並試圖強制它底部。它只會將其強制到第一個100%高度DIV的底部。

我現在唯一的想法是,如果我可以刪除.articleBody和項目頁面來解決這個問題?如果他們只是包裝第一個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{ 
    height: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; 
} 

回答

0

我發現的唯一方法是通過更改核心代碼。這很容易,,但從Joomla更改核心文件永遠不會好。

該文件位於: /components/com_content/views/article/tmpl/default.php

+0

你能提供什麼的'default.php'內改變一些細節? – Murmel