代码之家 › 专栏 › 技术社区 › Kieran Senior

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

css

Kieran Senior · 技术社区 · 16 年前

我正在css中创建一个复杂的布局,必须具备以下功能:

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

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

内容区域是position:absolute;带overflow:auto,看起来很像google reader。问题是,为了使滚动正常工作,我需要执行right:0;top:0;left:0;bottom:0。

你知道我如何实现一个滚动的内容区域,它不会显示在工具栏/过滤器的顶部,如果过滤器部分被删除,那么所有的内容都会自动上移,而不必指定额外的css来补偿吗?

干杯

编辑 :好的,为了方便起见,有人能告诉我如何使用css来实现google reader的布局吗?如果你在工具栏上引入新工具,导致工具栏高度调整,内容区域会自动向下移动。

1 回复 | 直到 16 年前

Frankie 16 年前

这样的东西适合你的需要吗?

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

推荐文章