Question

我有一个网页，包含标题，滑块菜单内容和页脚。

我需要从菜单开始的内容（菜单大小和位置基于上面取决于设备的元素），它应该始终是从底部重叠页脚25px。

如果我试图使它相对，它会挂到中间并且没有到达结尾，如果我把它设为绝对，我必须指定它应该从动态开始的值。

有一种有效的方法吗？

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

更新
Here是我需要的一个抽象例子。

页脚应始终固定在底部（稍后我将应用粘性页脚技术，这里我的问题是内容），标题，滑块和菜单锚定到上面的元素，内容应该锚定到元素上面和页脚。

Answer 1

你不清楚自己想要什么。所以我做了一些假设。（如果我认为错误，所有这些假设都可以得到纠正。）

<强>假设：

标题应滚动内容。（如果你愿意，可以改变这种行为）
滚动应仅应用于“内容区”。（如果你愿意，可以改变这种行为）
内容包装器应始终跨越到页面的末尾，即使物理内容小于该内容。并且只有在物理内容大于可用空间时才应滚动。（如果你愿意，可以改变这种行为）

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

这是Working Fiddle

这是一个纯CSS解决方案。（如果可以，我总是避免脚本）
跨浏览器（在上测试：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固定在视口底部，具有固定高度。并跨越整个视口宽度。

.scollableContent绝对定位为完全跨越视图顶部顶部和页脚顶部之间的所有空间。具有自动溢出功能，如果内容大于可用空间，则允许滚动。

在.scollableContent内，我们有一个简单的标题块元素，它将跨越他的内容高度。在他之后，我们为内容本身提供了另一个块元素。现在我们希望内容始终延伸到容器的末尾，无论标题高度如何（因此我们无法将其应用于固定高度）。

我们使用浮动＆amp; amp;清算技术。我们在.scollableContent之前创建了一个浮动元素，没有任何内容（所以它是不可见的，根本不占用任何地方）但是高度为100％。

在内容div的末尾，我们使用clear指令创建一个块。 now：这个新块不能与浮动元素位于同一行。所以他必须被移动下来，拖着内容div与他一起。

Etvoilà！

修改您可能会在您网站的某个现有Container中使用此解决方案。（而不是整个网站布局）。我已经更新了小提琴，以便将内容封装在容器中。这样，您可以更轻松地将此解决方案移植到您的工作网站。

这是Updated Fiddle

Answer 2

<style>
    div {
        border: 3px solid black;
        height: 300px;
        width: 100%;
        position: absolute;
        bottom: 25px;
    }
</style>
<div></div>

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

2 个答案: