Question

我有一个简单的<ul>，其位置固定，高度设置为100％并溢出为auto。这允许我在窗口高度小于无序列表的高度时滚动。

唯一的问题是我希望无序列表从页面顶部开始是30px。当滚动条出现时，<ul>的底部实际上已丢失，而且由于上边距，滚动条的底部缺失。

以下是一些示例标记：

<div id="sidebar">
  <ul>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
  </ul>
</div>

和CSS

div#sidebar {
    width:148px;
    height:100%;
    overflow:auto;
    position:fixed;
    margin-top:30px;
}

如何解决这个怪癖？

编辑： Argh，忘记添加位置：已修复

Answer 1

我们的想法是将30px放在除高度100％元素之外的元素上，因为边距和100％加在一起以创建最终元素高度（和：100％+ 30px> 100％）。通过在包含div上添加填充，您可以获得相同的效果。

试试这个。

<div id="container">
<div id="sidebar">
  <ul>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
    <li>Test1</li>
  </ul>
</div>
</div>

div#container {
    padding-top:30px;
}
div#sidebar {
    width:148px;
    height:100%;
    overflow:auto;
}

Answer 2

正如Joel所说，margin + height加在一起，所以你应该使用容器。

另外，请记住任何可能的外边距或填充物。这应该是完美的（在IE7 + Opera 10上测试），前提是你没有任何其他标记困扰那里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

        <style type="text/css">
            html, body{
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .container {
                padding-top: 30px;
                width:148px;
            }
            #sidebar{
                margin: 0;
                width:148px;
                height:100%;
                overflow:auto;
                background: red;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <ul id="sidebar">
                <li>...</li>
            </ul>
        </div>
    </body>
</html>

溢出：使用边距自动

2 个答案: