Flex-layout: Full height (fxFlex - height 100%) does not seems to work

[frosiere]

It looks difficult to have a div covering the full height of a screen.

Can you provide some support to define a div covering the full height?

The idea is to have an application footer but this footer will never appear to the end of the page due to this issue.

Some details can be found here.

[peluprvi]

I also think the documentation can be improved (maybe the project is too young, but it can have simple examples).

Try out these changes:

html, body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

```html

My app content

My footer

````

fxFlexFill will fulfill the height of his parent (which comes from body).

[denkan]

Just ran into this myself.
And what I needed, beside set height: 100% to html,body as @peluprvi suggests, was to also add custom flex css for app root-element (the fx-directives won't affect the very root elem):

/* <app-root></app-root> */
:host { 
    min-height: 100%;
    display: flex;
}

@frosiere: Forked your plunkr:
https://plnkr.co/edit/0NqDpjCmzwMDubbwcIDJ?p=preview

[somombo]

@everyone Is this not the same as https://github.com/angular/flex-layout/issues/162 ?

[somombo]

I am closing in favor of #162

[Upimage]

@denkan
Redarding your plunker: https://plnkr.co/edit/0NqDpjCmzwMDubbwcIDJ?p=preview
There is a scrollbar visible on different browsers (FF, Chrome, Edge) and the footer is not readable.
To get rid of the scrollbar, add the following lines in style.css
test-app { height: 100vh; display: flex; min-height: 100vh; }

[vikasrocky17]

Instead of using
{
height : 100%
}
Use
{
height: 100vh;
}

[somombo]

That's only a workaround.. what if this is an inner components of an
arbitrary smaller container size

On Sun, Jun 17, 2018, 4:07 PM vikasrocky17 [e-mail] wrote:

Instead of using
{
height : 100%
}
Use
{
height: 100vh;
}

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/230#issuecomment-397902986,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFQFYAQ0x6YzcURm6K_w5t5z6P029nEjks5t9rbogaJpZM4MmjM3
.

>

Somo

[simeyla]

Be super careful with 100vh on mobile devices. Test on a real device early to avoid disappointment!

100vh can be taller than the visible screen, due to toolbars appearing / disappearing or shrinking. It was concluded by browser vendors not to ever change the vh due to such activity.

Note vh will change if you rotate the phone, but when scrolling up and down and toolbars appear/disappear then vh won't change

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}