Make part=content take the full available height

[DiegoCardoso]

Make part=content take the full available height

[jouni]

I don’t see the issue. The content behaves just as the CSS says it should work. If you want the content to take all the available space, you should use height: 100%, right?

Edit: well, height: 100% doesn’t work because part="content" does not have explicit height defined. So you’d need to use flex for the content area or absolute positioning.

[jouni]

I agree that it should be possible to be able to make the content (user-defined) use the available space. But we should not force that by default.

[DiegoCardoso]

Take a look at this example where the div.page is set to height: 100%, but still it doesn't grow to take the full height even though when you inspect the content part it will show as using it.

[DiegoCardoso]

The current way to do that is by styling [part="content"]

[jouni]

Yeah, I edited my previous comment and added another one. Hope those clarify my concern.

[tmattsso]

What would the expectation of a developer be? can we make it easier for them then having to define a separate bit of boilerplate css? This is after all a very basic use case.

[jouni]

This is after all a very basic use case.

Yes, agreed. And I would expect the expectation of a developer to be that they only need to define the height of the content they provide as 100% to make it stretch. For example:

<vaadin-app-layout>
  <div class="my-content"></div>
</vaadin-app-layout>

<style>
  .my-content {
    height: 100%;
  }
</style>