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

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

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

如果我

尝试让它相对，它会挂到中间并且没有到达终点，如果我让它成为绝对的，我必须指定它应该从哪个值开始是动态的。

有没有有效的方法可以做到这一点？

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

更新
这是我需要的一个抽象示例。

页脚应始终锚定

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

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

假设：

标题应随内容一起滚动。（如果需要，可以更改该行为）
滚动应仅应用于"内容区"。（如果需要，可以更改该行为）
包装器应始终跨越到页面末尾，即使物理内容小于该内容。并且仅当物理内容大于可用空间时才应滚动。（如果需要，可以更改该行为）

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

这是一个工作小提琴

这是一个纯粹的CSS解决方案。（如果可以的话，我总是避免脚本）
跨浏览器（测试于： IE10， IE9， IE8，铬， 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内部，我们有一个简单的标题块元素，它将跨越他的内容高度。在他之后，我们还有另一个用于内容本身的块元素。现在我们希望内容始终拉伸到容器的末尾，而不管标题高度如何（因此我们不能以固定高度应用它）。

我们使用浮动和清算技术来实现这一点。我们在.scollableContent之前创建一个浮动元素，没有内容（所以它是不可见的，根本没有真正占据任何地方），但具有 100% 的高度。

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

瞧！

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

这是更新的小提琴

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

相关内容

最新更新

热门标签：