我想要一个浮动的div(称之为'侧边栏')显示100%的容器高度,并在必要时滚动.
如果侧边栏的内容(高度)超过容器的内容(高度),则应滚动.
内容是动态的,固定的高度是不可能的.
我想尽可能避免使用表格,但如果这是唯一的解决方案,我会使用它们.
我不想使用javascript.
如果表,正文和单元格都被赋予100%高度,则可以使用表格实现此效果,并且在一个单元格中,可以设置高度为100%且溢出:滚动的div.这适用于webkit(Safari和Chrome)以及IE,但在壁虎(Fx)中失败 - '失败'意味着内容比容器更多的div将扩展容器(再次仅在Fx中).如果使用带有display:table/table-row/table-cell的div,则在webkit中使用相同的想法,但在Fx和IE中都失败.如果它有用,我可以提供一个这样的样本.
使用高度为100%的iframe也可以实现这种效果,这似乎适用于所有现代浏览器,但我希望尽可能避免不必要的iframe.
我必须认为,因为可以使用上面的"黑客",所以可能使用无桌面,无框架的CSS,但超出了我的理解水平.
有什么建议？tyia.
我正在使用绝对定位让div填充整个浏览器窗口。但是，我不想将其与有时在那里且有时不在的粘性div结合使用。
为了使事情更清晰，请查看以下jsFiddle：http : //jsfiddle.net/henrikandersson/aDdRS/
我希望“顶部”，“左侧”和“子标题”始终保持不变。我还希望“内容” div填充窗口的剩余内容。但是，有时我想在“内容”之前显示“警报” div。到目前为止，一切都很好，您可以在jsFiddle中看到。但是，我希望“警报”坚持“子标题”并在滚动时停留在该位置。如您所见，如果您调整窗口大小，那么“警报”将随“内容”一起滚动-我不希望这样。
有人知道如何解决这个问题吗？
编辑：我在我的jsFiddle中进行了更改，我将“警报”放置在应有的位置（在子标题和内容区域之间）。如您所见（http://jsfiddle.net/henrikandersson/aDdRS/12），由于content-area具有top：20px，所以它不会向下推“ content-area”。而且我不能设置top：40px，因为“ alert”应该可以改变高度，并且我希望内容区域在有或没有上述警报的情况下都具有相同的css。
编辑＃2：此问题处理相同的问题，但也没有该问题的解决方案。好像不使用JavaScript是不可能的： 可变高度滚动div，相对于可变高度同级放置