0

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

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

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

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

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

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

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

4

2 回答 2

1

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

假设：

  1. 标题应随内容滚动。（如果您愿意，可以更改该行为）
  2. 滚动应仅应用于“内容区”。（如果您愿意，可以更改该行为）
  3. 内容包装器应始终跨越到页面的末尾，即使物理内容小于那。并且仅当物理内容大于可用空间时才应进行滚动。（如果您愿意，可以更改该行为）

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

这是一个工作小提琴

  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在视口底部，具有固定高度。并跨越整个视口宽度。

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

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

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

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

瞧！

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

这是更新的小提琴

于 2013-09-16T08:04:00.397 回答
0 
<style>
    div {
        border: 3px solid black;
        height: 300px;
        width: 100%;
        position: absolute;
        bottom: 25px;
    }
</style>
<div></div>
于 2013-09-16T06:04:43.040 回答