Html 在Joomla中将页脚强制放入articleBody包装器

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

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

在DOM中呆了几个小时后，我意识到如果我可以将我的标记放入.item页面包装器中，并将其与文章正文一起放入底部，那么它就应该放在底部。最好，我不必将页脚编码到每一页，因为从编辑的角度来看，这将是灾难性的

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

不，绝对位置尝试将其压到底部不起作用

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>

---

修复了jQuery的一行。这是它工作的唯一方式，因为它需要位于itemprop=“articleBody”内，才能装入100%高度的容器

jQuery

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

---

有什么想法吗？jQuery/JavaScript是将元素移动到DOM中其他位置的唯一方法吗？

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

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