- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 3 Nov 2014 12:29:26 -0800
- To: François REMY <francois.remy.dev@outlook.com>
- Cc: www-style list <www-style@w3.org>
On Mon, Nov 3, 2014 at 11:29 AM, François REMY
<francois.remy.dev@outlook.com> wrote:
> We already have “position: sticky” for headers that we want to be in the
> flow as long as they remain fully visible and “fixed” when they are not.
>
> While working on a webapp today, I saw an issue with a footer that should
> exhibit a somehow reversed behavior: occupy a room in the document flow, but
> be rendered as a fixed-element if doing so would make the element appear
> lower in the viewport than if it was rendered in the flow (see example
> further).
>
> The only solution now to get this kind of effect is to use a script.
Nope, just use Flexbox:
<!DOCTYPE html>
<header>header</header>
<main>
main<br>
main<br>
main<br>
main<br>
main<br>
main<br>
(add more to see it in overflow situations, too)
</main>
<footer>footer</footer>
<style>
header { background: lime; }
main { background: cornflowerblue; }
footer { background: red; }
html, body { margin: 0; }
html { height: 100%; }
body { display: flex; flex-flow: column; min-height: 100%; background: black;}
main { flex: 1; }
</style>
~TJ
Received on Monday, 3 November 2014 20:30:14 UTC