Question

我在CSS中创建一个复杂的布局，必须具备以下内容：

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

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

内容区域是位置：绝对;溢出：自动，看起来很像谷歌阅读器。问题是我需要做对：0;顶部：0;左：0;和底部：0以使滚动正常工作。

任何想法如何实现滚动内容区域没有显示在工具栏顶部/过滤器但如果删除过滤器部分然后一切都自动向上移动而不必指定额外的CSS来补偿？

干杯

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

Answer 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>

绝对定位，溢出滚动，动态元素

1 个答案: