Body keeps its height-size

General
1

hello,

i have a layout that contains a “navigation-bar” at the top, a “content-area” at the center und a “footer” at the bottom.
when i add (very) long content to the “content-area”, the html/body-element does not notice the change and keeps its height-size.
as a result the “footer” keeps its position instead of staying at the bottom.

html and body have height: 100vh;

has someone observed this same “behaviour”?

2

When you have a body with 100vh height, the body takes the whole height even if it’s content does not need such a high container, which is good. But it also means that when the content would need more space than 100vh, not all of the content will be able to be displayed.

There are two ways to fix your issue, with different end results.

  1. instead of setting body’s height to 100vh, set it’s min-height to 100vh. This allows the body to grow in size if needed. If it needs more space, it will automatically do so and a scroll bar will appear so you can scroll down and see the rest of the body.

  2. Make the content area scrollable if it’s content is too high. This would be better than option 1 in my opinion, as not the whole body has to be scrolled - you will always have the navigation bar and the footer together on the screen. In Vaadin 8 you can use the Panel component for this, for Vaadin 10+ you can check out my add-on [ScrollLayout]
    (https://vaadin.com/directory/component/scrolllayout) and for example use a VerticalScrollLayout for the content area instead of a VerticalLayout. Now when the content area gets too big, it retains the defined size but there will appear a scroll bar on the side of the area so you can see all content.

3

min-height with 100vh does not work. the component (sidebar) does not notice that a change has occurred
and just keeps his height.
the problem is that the state of the change is not propagated, when new content is pushed into the “content-area”.

4

when using my first approach, you should set the height of your sidebar (which is within the body) to 100%. Now it will always reach the bottom of the page even if the content grows.

5

thx! set height of sidebar helps.