Html 始终在我的最后一个列表项“下方留有10px的余量”；请参阅更多链接；

我的页脚有4列

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

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

在我的专栏中使用div（#col）解决了这个问题，最大高度：227px；最小高度：227px；财产

我现在的问题是，我总是希望我的最后一个项目“查看更多链接”的底部只有10像素的边距，但是我在不同的浏览器和不同的分辨率中有不同的边距

你知道我怎么解决这个问题吗？我试图“玩”绝对位置或固定高度的容器，但我不能在不同的浏览器和分辨率有相同的结果

我举了一个例子：

我的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>

---

我认为，如果您希望列容器内的某个项目与容器本身底部的距离保持一致，那么您需要的是：

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

---

实现这一点的一种方法是使用最后一个子选择器。这样，您就不需要向html中的最后一个元素添加类

#footer1 ul li:last-child
{
    margin-bottom: 10px;
}

---

与其设置最小和最大高度，不如只设置高度？

#footer1 ul li:last-child
{
    margin-bottom: 10px;
}