2017-06-30 5 views
1

私は100%高さのDIVを使用するレイアウトを持っています。しかし、私はフッターを追加すると、それは最初のDIVにジャンプし、その中央のどこかに浮動小数点が表示されます。私はコードを見て、それは、パーティクルとアイテムページが私の子供DIVsの親ですが、インスペクタによると、最初のDIVだけがラップされます(すべてのDIVはコンテナの内側にあり、DOMツリーは100%子供)。Joomlaで自動追加されたラッパーを削除しますか?

私はポジションアブソリュートを使用しようとしましたが、フッターに高さを与え、強制的にボトムにしようとしました。それは最初の100%の高さのDIVの底にそれを強制するだけです。

この問題を解決するには、.articleBodyとitem-pageを削除できますか?彼らが最初のDIVだけを折り返しているのであれば、.container-fluidが唯一の親で、フッターが一番下に置かれるかもしれません。他の誰かが別の解決策を持っていれば、私はすべて耳にしています。記録のために、ブートストラップ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 - 影響のPAGE OFコードエディタで

<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

関連する問題