0

页面的主要结构是这样的：

<html>
    <body>
        <div id="Menu">
            <h1>Menu</h1>
            <ul id="MenuList><!-- some LI elements --></ul>
            <h1>Submenu 1</h1>
            <ul id="Submenu1List"><!-- many LI elements --></ul>
            <h1>Submenu 2</h1>
            <ul id="Submenu2List"><!-- many LI elements --></ul>
            <h1>Submenu 3</h1>
            <ul id="Submenu3List"><!-- some more LI elements --></ul>
        </div>
        <div id="Main"><!-- long content --></div>
    </body>
</html>

我使用 JQuery 使#Menu 中的 H1 元素可单击，以便所有其他 UL 都被卷起，而 H1 之后的 UL 被卷下。我想独立于#Menu 滚动#Main，如果需要，我想在#Menu 的每个UL 中使用滚动条。这是相关的CSS：

    html { 高度：100%; 溢出：隐藏；字体大小：.8em；}
    身体{身高：100%；溢出：隐藏；}
    div#Main { 位置：绝对；右：0px；顶部：0px；底部：0px；宽度：79.9%；}
    div#Menu { 位置：绝对；左：0px；顶部：0px；底部：0px；宽度：20%；}

    div#Main { 溢出：自动；}
    div#Menu h1 { 字体大小：1.5em; }
    div#Menu ul { 最大高度：87%; 溢出：自动；}

这正是我想要的方式。#Main 区域是可滚动的，每个 UL 展开时，如果内容多于包含的 #Menu DIV 可以包含的内容，则会获得一个滚动条。

唯一的问题是我必须指定包含 #Menu DIV 的 87% 的高度，这仅适用于我的屏幕大小、窗口大小和字体大小的组合。有没有办法在不硬编码每个 UL 的高度的情况下达到相同的效果？

如果你喜欢，你可以看到页面。我会发布指向 CSS (/musicdb.css) 和 JS 代码 (/musicdb.js) 的链接，但我不允许。如果要查看源代码，可以通过在 URL 中添加 ?mode=xml 或 ?mode=html 来切换内容类型，并在 IE 或 Firefox 中查看。

4

1 回答 1

0

我在用 Firebug 玩你的网站页面。除了这个之外，真的无法为您提供一个非常优雅的快速解决方案：

将“div#Menu”设置为 100%，将“div#Menu H1”设置为百分比高度，例如 5%。

您有“菜单”、“艺术家”、“标签”和“格式”= 4 h1 项目。那是 5 X 4 = 20%。

将“div#Menu ul”设置为 100-20 = 80%。

玩弄数字并调整垂直对齐，你应该很高兴。缺点是，在极小或极大的屏幕上都不会有很好的视野。

我的 2 美分。

于 2009-10-18T12:36:09.050 回答