html - 始终在我最后一个列表项 "See more links"下方留出 10px 的底部边距

Question

我的页脚有 4 列。

我右边的列有一些列表项，我的最后一个列表项“查看更多链接”，当我点击它时，我正在使用 jQuery slideToggle() 将我的第一个元素列表更改为其他列表。

但是使用这个 slideToggle，当我点击“查看更多链接”时，我的页脚会上升一点然后再次下降。

在我的专栏中使用 div (#col), max-height:227px; 解决了这个问题；和最小高度:227px；礼节。

我现在遇到的问题是，我希望最后一项“查看更多链接”的底部边距始终只有 10px，但我在不同的浏览器和不同的分辨率下有不同的边距。

你知道我该如何解决这个问题吗？我试图“玩”绝对位置或固定高度的容器，但我无法在不同的浏览器和分辨率下获得相同的结果。

我这里有我的例子:http://jsfiddle.net/vb63n9vg/4/

我的 html:

<footer id="footer-container">
    <section id="footer1">
        <div id="col" class="col4" style="margin-right:0;">
            <h1>LINKS</h1>
            <ul id="list1">                
                <li><a href="#"><span>Link 0</span></a></li>
                <li><a href="#"><span>Link 1</span></a></li>
                <li><a href="#"><span>Link 2</span></a></li>
                <li><a href="#"><span>Link 3</span></a></li>
                <li><a href="#"><span>Link 4</span></a></li>
                <li><a href="#" id="change_links1" class="toggle">see more links</a></li>
            </ul>
            <ul id="list2"> 
                <li><a href="#"><span>Link 0</span></a></li>
                <li><a href="#"><span>Link 1</span></a></li>
                <li><a href="#"><span>Link 2</span></a></li>
                <li><a href="#"><span>Link 3</span></a></li>
                <li><a href="#"><span>Link 4</span></a></li>
                <li><a href="#" id="change_links2" class="toggle">Ver mais Links</a></li>
            </ul>
        </div>
    </section>
    <section id="footer2-container">
        <div id="footer2">
            <p class="copyright">&copy; copyright</p>
        </div>
    </section>
</footer>

我的CSS:

*{margin:0; padding:0;}

#list2
{
    display:none;
}

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:#ff9900;
    border-top:0;
} 
#footer1
{
    width:1160px;
    margin:0 auto 0 auto;
}


#footer1 ul 
{
    list-style:none; 
}

#footer1 ul li
{
    margin:0 0 7px 0;
}

#footer1 ul li a 
{   
    text-decoration:none;
    color:#444;
    font-family: 'Open Sans', sans-serif;
    font-size:15px;
}

#footer1 ul li a:hover
{
    color:#fff;
}

#col
{
    float:left;
    margin-right:40px; 
    margin:10px 53px 10px 0;
    width:250px;
    max-height:227px;
    min-height:227px;
}

#footer2-container
{
    width:100%;     
    float:left;
    background:#ECECEA;
    border-top:0;
    border-top: 2px solid #e0e0e0;
}

#footer2
{
    width:1160px;
    margin:10px auto 10px auto;
    background:#ECECEA;
    height:40px;

}

#footer2 .copyright
{
    float:left; 
    font-family: 'Open Sans', sans-serif; 
    color:#2F3083; 
    font-size:14px; 
    line-height:40px;
}

Answer 1

我认为如果您希望列容器内的元素与容器本身的底部保持一致的距离，您需要的是:

#col
{
  padding: 0 0 10px 0;
}