Question

我有一个标题div和页脚div。标题div永远不会移动;但是，无论屏幕大小如何，页脚div都必须停留在窗口的底部，即“粘性页脚”。在这两个div之间是动态填充的内容div。

内容div的底部直接位于页脚div的顶部，它必须与页脚div一起上下移动（当屏幕尺寸垂直扩展和收缩时。）它也可以被认为是“粘性的”。
但是，如果有足够的内容，则内容div必须垂直扩展（内容div的底部仍然直接保留在页脚div的顶部）以容纳尽可能多的内容。这将发生在内容div的顶部进入标题div ...
然后，如果在页眉和页脚div之间显示的内容太多，则内容div将变为可滚动，内容div的高度收缩，以便永远不会与标题div重叠或重叠页脚div。
同样，内容div永远不会与标题div或页脚div重叠。如果两个div之间没有足够的空间来显示一个视图中的所有内容，则内容div必须变为可滚动overflow-y: scroll;。

这解释了到目前为止我的（没有结果的）尝试：
我还没有成功完成任何这一切。我所拥有的是最小的，而且基本上没用。我遇到的一些问题是：如果我制作页脚div position: absolute; bottom: 0px;它将是一个“粘性页脚”并且无论垂直屏幕大小如何都会保留在屏幕底部。但是，通过这种绝对定位，内容div将很快与页脚重叠。我试图通过制作内容div position: absolute; bottom: 180px;来阻止这种情况。 180px是我的页脚div的高度。这有点......当需要动态添加内容时，它很快就会成为一个问题。内容div的顶部将快速与标题div重叠...所以然后我为内容div设置一个固定的高度，并在超过该高度时启用滚动，但这不会考虑大于我自己的屏幕可能有更多空间展示内容。

最终，这一切都不是我需要它的方式。使用CSS和/或javascript（如果需要）实现此目的的最佳方法是什么？而且，是否有一个很好的起点让我走上你可能知道的正确轨道？

感谢您的帮助！

Answer 1

我不认为在没有flexbox的CSS中这是可行的。如果您足够幸运，只需要支持支持flexbox的浏览器（或者如果您可以回退到旧浏览器中的标准布局），您可以试试这个：

<强> HTML：

<header></header>

<div class="content">
    <div class="container"></div>
</div>

<footer></footer>

<强> CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    align-items: flex-end;
}

这是小提琴：http://jsfiddle.net/qhKa9/

如果依赖JavaScript没有问题，可能会有一个不同的解决方案，支持更深入的浏览器。这是一个镜头。

<强> CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript （使用jQuery）：

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
    });
}).resize();

这是小提琴：http://jsfiddle.net/N672c/

P.S。你应该throttle调整事件监听器的大小，但那是a discussion for another day。

css / javascript - 如何实现这些不寻常的设计要求？

1 个答案: