Box with full={true} attribute gets the size of whole window, ignoring header and footer size

I am trying to implement sticky footer, by wrapping the TodoAppDashboard component in a Box component that has full={true} property (some code removed for brevity):

<App>
  <Header/>
  <Box full={true}>
    <TodoAppDashboard />
  </Box>
  <Footer/>
</App>

Expected Behavior

I expect to see the following things in the browser window:

1. Header at top
2. The TODO app component
3. Footer at the bottom

This is based on the assumption that the box height will be calculated by the equation: ‘’‘Screen.height - Header.height - Footer.height’‘’

Actual Behavior

I see all the components as expected, except that the height TODO app component is higher than expected. It seems as if the value is taken from ‘’‘Screen.height’‘’, ignoring ‘’‘Header.height’‘’ and ‘’‘Footer.height’‘’.

Steps to Reproduce

1. Generate sample app (grommet new sample-app)
2. Surround the TodoAppDashboard component with Box that has the full={true} propery.

<Box full={true}>
  <TodoAppDashboard />
</Box>

1. Start the app (gulp dev) and open the browser

Your Environment

• Grommet version: 0.1.5
• Browser Name and version: Firefox 48.0 and Google Chrome 53.0.2785.113 (64-bit)
• Operating System and version (desktop or mobile): Ubuntu 16.04 desktop (updated), x64

[alansouzati]

Full will use the entire viewport width as described in here:

https://grommet.github.io/docs/box

Whether the width and/or height should take the full viewport size.

Are you looking for a floating footer? Always visible the the bottom of a view port?

If yes, we support it:

<Footer float={true} fixed={true}/>

[dhampik]

I guess when people want to have sticky footer, they usually mean a footer that is stuck at the bottom when there is not much content on the page and pushed down with content when the content is big enough. A lot of ways how to implement the sticky footer can be found at CSS-Tricks.

In case if anyone looking for a real sticky footer sample for grommet - here it is! @alansouzati, maybe you can propose a more elegant solution without using custom css?