绝对定位、溢出滚动、动态元素答案

【问题标题】：Absolutely Positioned, Overflow Scroll, Dynamic Element绝对定位、溢出滚动、动态元素
【发布时间】：2009-10-29 00:14:18
【问题描述】：

我正在用 CSS 创建一个复杂的布局，并且必须具备以下条件：

__________________________________________
|     |                                   |
|     |              filters              |
|     |___________________________________|
|     |                                   |
|     |              Toolbar              |
|     |___________________________________|
| nav |                                   |
|     |                                   |
|     |                                   |
|     |         Content (scroll)          |
|     |                                   |
|     |                                   |
|_____|___________________________________|

导航是静态的，所以它总是显示出来。内容区域本身是可滚动的。工具栏也始终存在。然而，过滤器部分应该是动态的，如果它丢失，那么工具栏/内容应该向上移动并占用过滤器曾经占用的空间。

内容区域为 position:absolute;带有溢出：自动，看起来很像谷歌阅读器。问题是我需要做正确的事：0；顶部：0；左：0；和 bottom:0 以使滚动正常工作。

知道如何实现一个不显示在工具栏/过滤器顶部的滚动内容区域，如果过滤器部分被删除，那么一切都会自动向上移动，而无需我指定额外的 CSS 来补偿？

干杯

编辑：好的，为了更容易，有人可以告诉我如何使用 CSS 实现 Google Reader 的布局，如果您在工具栏上引入新的工具，内容区域会自动向下移动导致工具栏高度调整？

【问题讨论】：

您基本上拥有 2 列布局。如果您让#Content 的大小填充剩余区域而不是绝对定位它，它应该可以解决这个问题。
整个页面上唯一可滚动的区域是内容区域，但应该是overflow:auto;。导航部分也是溢出：自动，因为它应该能够垂直滚动。你必须绝对定位它才能溢出：自动否则它不能滚动：/

标签： css

【解决方案1】：

这样的东西能满足你的需要吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            #nav {
                position: fixed;
                float: left;
                width: 25%;
                background-color: #F00;
            }

            #filters {
                float: right;
                width: 75%;
                background-color: #FF0;
            }

            #toolbar {
                float: right;
                width: 75%;
                height: 70px;
                background-color: #00F;
            }

            #content {
                float: right;
                width: 75%;
                background-color: #0FF;
                overflow-y: scroll;
                min-height: 400px;
            }

        </style>
    </head>
    <body>

        <div id="nav">this is the nav</div>

        <div id="filters">filters</div>
        <div id="toolbar">topbar</div>
        <div id="content">content</div>

    </body>
</html>

【讨论】：

虽然我没有尝试过，但我不明白如果工具栏和过滤器部分的高度是固定的，为什么内容区域的高度是 80%？当工具栏/过滤器不存在时，它应该是 100% 的高度来填补空白吗？
这很接近，但内容区域需要始终填满整个空间。
@Kezzer，啊！但是，您必须将 Java Script 插入其中或坚持使用表格。您可以使用 DIV 获得 100% 的高度。在另外 80% 的事情上，你是对的……我大惊小怪，忘了删除这些值。