Sticky!

Just as with content, if the header or footer changes their height the sheet will readjust accordingly.

Tap to expand

Putting the "Done" button in a sticky footer is a nice touch on long bottom sheets with a lot of content. And on resize events the sticky elements are always visible, unlike the "Dismiss" button in the first example that needs to be animated first.

When you provide a header the draggable area increases, making it easier for users to adjust the height of the bottom sheet.

The same is true for a sticky footer, as it supports drag gestures as well to optimize for large phones where the header might be difficult to reach with one hand.

Tap to expand

Additionally this bottom sheet uses stable viewpoints that are equivalent to vh CSS units. Predictable heights like this is also handy if there's content loaded async, or you're implementing a virtual list so the sheet can't rely on measuring the height of its content.