-2

好的，有两种情况：

我有这样的布局：

----------------
button header
----------------
Contents
Contents
Contents
Contents (with scrollbar)
Contents
------------
footer
------------

我想要实现的是：按钮页眉和页脚必须始终保持在视图中 - 内容必须是可滚动的。 buttonheader 可以是空的——因此可滚动的内容应该移动到 buttonheader 上方——如果没有按钮，那么丢失空间是没有意义的。

所以绝对/固定定位似乎不是一个选择，所以我尝试了相对。（绝对没有解决方案的原因是因为如果内容绝对放置在那里，如果按钮标题为空，它们将永远不会移动。）

我将高度设置为百分比 - 但如果有人调整窗口大小，它当然看起来很糟糕。

看这里并调整输出窗口的大小：

关于如何获得工作相对定位的可滚动内容的悲伤尝试

第二个版本：

是显示它的行为（在顶部） - 内容应该贴在页面顶部 - 页脚在这里是错误的

4

1 回答 1

1

灵活的行为听起来很像表格行，所以我在 CSS 中采用了这种方式。添加了一些额外的 div 以使 firefox 在主单元格内很好地播放。

见http://jsfiddle.net/willemvb/XMEcC/

#container{
    position: relative;
    width: 300px;
    display: table;
    height: 100%;
}

#header, #footer{
    width: 100%;
    height: auto;
    display: table-row;
}

#main{
   height: 100%;
   display: table-row;    
}

#cell{
   display: table-cell;    
}

#wrapper{
    position: relative;
    width: 100%;
    height: 100%;   
}

#overflow{
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width:100%;
}

编辑：仅在 FF 和 Safari 中测试

于 2012-10-25T17:24:23.540 回答