css - Joomla 文章样式

Question

我想创建一篇包含简历的文章。文章的 HTML 如下所示:

<div class="bio-container">
    <div class="bio">
        <img src="images/cv-girl.jpg" border="0" alt="cv-girl" title="cv-girl" /> 
        <ul>
            <li>Position: </li>
            <li>Physics Lab</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Paper blabla</h4>
        <ul>
            <li>paper 1</li>
            <li>paper 2</li>
            <li>paper 3</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Interests</h4>
        <ul>
            <li>Interests 1</li>
            <li>Interests 2</li>
            <li>Interests 3</li>
            <li>Interests 4</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Lessons</h4>
        <ol>
            <li><a href="www.google.com">lesson 1</a></li>
            <li><a href="www.google.com">lesson 2</a></li>
            <li><a href="www.google.com">lesson 3</a></li>
        </ol>
    </div>

    <div class="bio">
        <h4>Publishings</h4>
        <div class="public-menu">
            <a href="#" onclick="showHide('books');return false;">Books</a>
            <a href="#" onclick="showHide('magazines');return false;">Magazines</a>
            <a href="#" onclick="showHide('conf');return false;">Conferences</a>
            <a href="#" onclick="showHide('show');return false;">Shows</a>
            <a href="#" onclick="showHide('disc');return false;">Discography</a>
            <a href="#" onclick="showHide('other');return false;">Other</a>
        </div>
        <hr />

        <div id="books" class="anchor-hidden">
            <h5>Books</h5>
            <table border="0">
                <thead> 
                    <tr>
                        <th>A/A</th><th>Title</th><th>Year</th>
                    </tr>
                </thead> 
                <tbody>
                    <tr>
                        <td>[1]</td>
                        <td>C.K. Georgiadis, P. Fouliras, and A. Manitsaris, "Mobile Agent Platforms and Personalized Multimedia Services Issues", Chapter in "HANDBOOK OF RESEARCH ON MOBILE MULTIMEDIA, 2nd EDITION", I.K. Ibrahim (Ed.), Information Science Reference Inc (IGI Group), September 2008, ISBN 978-1-60566-046-2, pp. 595-611.</td>
                        <td>2008</td>
                    </tr>
                    <tr>
                        <td>[2]</td>
                        <td>S. Weerawarana, F. Curbera, et al., "Αρχιτεκτονική Πλατφόρμας Υπηρεσιών Ιστού", επιστημονική επιμέλεια ελληνικής έκδοσης: Χρήστος K. Γεωργιάδης, εκδόσεις Κλειδάριθμος, σελ. 455, ISBN 978-960-461-086-0, Αθήνα 2008.</td>
                        <td>2008</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- The rest of the divs for the links goes here -->
    </div>
</div>

CSS 是:

.bio img {
    float: left;
    margin-right: 20px;
    border: 1px inset black;
}

.bio:nth-child(odd){
    background-color: #EAEAEA;
}

.public-menu a {
    margin: 5px;
}

.anchor-hidden {
    /*overflow: hidden;*/
    display: none;
}

JS函数:

function showHide(shID) {
    if(shID == "all") {
        document.getElementById("books").style.display = "block";
        document.getElementById("magazines").style.display = "block";
        document.getElementById("conf").style.display = "block";
        document.getElementById("show").style.display = "block";
        document.getElementById("disc").style.display = "block";
        document.getElementById("other").style.display = "block";
    }

    else {
        document.getElementById("books").style.display = "none";
        document.getElementById("magazines").style.display = "none";
        document.getElementById("conf").style.display = "none";
        document.getElementById("show").style.display = "none";
        document.getElementById("disc").style.display = "none";
        document.getElementById("other").style.display = "none";

        document.getElementById(shID).style.display = "block";
    }
}

我使用的模板是Ja Edenite

问题是，当我点击书籍标签时，会显示隐藏的 div，但不会将页脚向下推。 (根据 SO 政策，我不能发布屏幕截图，所以...)

文章溢出页脚。到目前为止，我已经尝试了几件事(现在尝试解决这个问题大约 7 个小时)，经过这么长时间我要么真的很累，要么有一些我没有想到的事情。

如有任何想法，我们将不胜感激!

Answer 1

我刚刚使用了您的代码并添加到我自己的页脚 div 中，它对我来说效果很好。

这是我用于页脚的内容:

<div id="footer" style="text-align:center; height:50px; background-color:#000; color:#FFF;">
    <p>Test Footer</p>
</div>

不确定您为页脚赋予了何种样式，但如果您为其赋予了定位，例如 position:fixed;，那么我会建议摆脱它。