在 Joomla 中强制页脚进入文章主体包装器

Question

我需要将页脚放在 Joomla 自动添加的 class articleBody 和包装文章内容的 .item-page 中。页脚当前在我的 index.php 中的文章消息之后加载，页面本身是在 Joomla 的后端生成的，因此是自动包装器。因此，页脚不会与文章的其余部分一起包含在 .item-page 中。

这是因为页脚覆盖了页面上除第一个 DIV 之外的所有其他 DIV。所有 DIV 都设置为 100% 高度，包括由 Joomla 生成的 articleBody 和 .item-page。必须这样才能达到效果。作为记录，我正在使用 Bootstrap 3 并正确加载它。

在 DOM 中花费数小时后，我意识到如果我可以将我的标签放入带有文章正文的 .item-page 包装器中，它应该适合底部。最好是，我不必将页脚编码到每个页面中，因为从编辑的角度来看，这将是灾难性的。

如果有人好奇，我非常渴望解决这个问题，所以我很乐意讨论这个问题和post这里的结果，以帮助将来可能遇到这个问题的其他人。

不，绝对位置试图将其强制到底部是行不通的。

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;
}

Answer 1

固定为一行jQuery。这是它工作的唯一方法，因为它需要在 itemprop="articleBody" 内部才能适合 100% 高度的容器。

jQuery

jQuery('footer').appendTo('div [itemprop="articleBody"]');

在 Joomla 中强制页脚进入文章主体包装器

Force Footer Into articleBody Wrapper in Joomla

html

css

height

joomla

twitter-bootstrap