0

我想创建一篇包含简历的文章。文章的 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 个小时），我要么真的很累，要么有一些我没有想到的事情。

任何想法将不胜感激！

4

2 回答 2

0

我刚刚把你的代码添加到我自己的页脚 div 中，它对我来说效果很好。

这是我用于页脚的内容：

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

不确定您为页脚提供了什么样式，但如果您给它定位例如position:fixed;，那么我建议您摆脱它。

于 2012-06-08T03:55:41.347 回答
0

这可能是由于网站上有浮动内容。尝试在您的文章下方添加以下内容：

<div class="clr"></div>

如果您使用的是删除空 div 的编辑器，您还可以使用类似于 bootstrap 的 clearfix ：

.bio-container:after {
    clear: both;
}
.bio-container:before, .bio-container:after {
    display: table;
    content: "";
    line-height: 0;
}

希望这可以帮助 ：）

于 2013-02-26T01:06:00.267 回答