css - 将中间容器放在前一个容器之后，但停靠在底部

Question

我有一个由页眉、 slider 菜单内容和页脚组成的网页。

我需要内容从菜单开始(菜单大小和位置取决于上面的元素，具体取决于设备)，并且它应该始终与底部重叠 25 像素。

如果我试图让它成为相对的，它会卡在中间而不会到达尽头，如果我让它成为绝对的，我必须指定它应该从哪个值开始是动态的。

有没有一种有效的方法来做到这一点？

更新
我不介意用 jQuery 来做，只要内容的顶部是动态的并且无论它是什么都取决于前一个元素。

更新
Here是我需要的抽象示例。

页脚应始终锚定在底部(稍后我将应用粘性页脚技术，这里我的问题是内容)，页眉、 slider 和菜单锚定在上面的元素上，内容应锚定在元素上上面和页脚。

Answer 1

你不太清楚你到底想要什么。所以我做了一些假设。(如果我假设错误，所有这些假设都可以纠正)。

假设:

1. 页眉应随内容滚动。 (如果你愿意，可以改变这种行为)
2. 卷轴只能应用于“内容区”。 (如果你愿意，可以改变这种行为)
3. 内容包装应始终跨越到页面末尾，即使物理内容小于该页面也是如此。并且只有当物理内容大于可用空间时才应该滚动。 (如果你愿意，可以改变这种行为)

[如您所见，所有这些行为都可以使用正确的 CSS 进行更改]

这是一个Working Fiddle

1. 这是一个纯 CSS 解决方案。 (如果可以的话，我总是避免脚本)
2. 跨浏览器(测试:IE10、IE9、IE8、Chrome、FF)

HTML:(我为可滚动内容添加了一个包装器)

<div class="scollableContent">
    <div class="header">
        <h1>header</h1>
    </div>
    <div class="main">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia tempus diam in malesuada. Aliquam id enim nisl. Integer hendrerit adipiscing quam, fermentum pellentesque nisl. Integer consectetur hendrerit sapien nec vestibulum. Vestibulum ac diam in arcu feugiat fermentum nec id nibh. Proin id laoreet dui, quis accumsan nisi. Quisque eget sem ut arcu faucibus convallis. Sed sed nisl commodo, faucibus leo sed, egestas est. Cras at nibh et erat ullamcorper sollicitudin vitae non nibh.</h1>
    </div>
</div>
<div class="footer">
    <h2>footer</h2>
</div>

CSS:

*
{
    padding: 0;
    margin: 0;
}

.scollableContent
{
    position: absolute;
    top: 0;
    bottom: 25px; /*.footer height*/
    overflow: auto;
}
.scollableContent:before
{
    content: '';
    height: 100%;
    float: left;
}
.header
{
    /*Addition*/
    background-color: red;
}
.main
{
    /*Addition*/
    background-color: yellow;
}
    .main:after
    {
        content: '';
        display: block;
        clear: both;
    }

.footer
{
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 25px;

    /*Addition*/
    color: white;
    background-color: blue;
}

解释:.footer 固定在视口(viewport)底部，高度固定。并跨越整个视口(viewport)宽度。

.scollableContent 的绝对定位正好跨越视口(viewport)顶部和页脚顶部之间的所有空间。如果内容大于可用空间，则自动溢出允许滚动。

在 .scollableContent 中，我们有一个简单的标题 block 元素，它将跨越他的内容高度。在他之后，我们有另一个内容本身的 block 元素。现在我们希望内容始终延伸到容器的末尾，而不管标题高度如何(因此我们不能以固定高度应用它)。

我们使用 float 和清除技术来实现这一点。我们在 .scollableContent 之前创建了一个 float 元素，没有内容(因此它是不可见的，根本不占据任何位置)但高度为 100%。

在内容 div 的末尾，我们使用 clear 指令创建一个 block 。现在:这个新 block 不能与 float 元素位于同一行。所以必须将他向下移动，同时拖动内容 div。

Et voilà!

编辑:您可能会在您网站的某些现有容器中使用此解决方案。 (而不是整个网站布局)。我已经更新了 fiddle ，以便内容包含在一个容器中。这样您就可以更轻松地将此解决方案移植到您的工作网站。

这里是 Updated Fiddle