The viewport size that you define is the part inside the content area of the browser. You also need to take into account any pixels used for e.g. the browser’s address field and tabs. The exact size there depends on the browser and operating system which means that it might be better to set the height as 100% to make it cover all the space that is visible.
Do you want to remove the scrollbars from the body?
You can also set the following style
body {
/* use optionally min-height if you want still to scroll vertically */
height: 100vh;
/* use % instead of vh, because it prevents the horizontal scrollbar when a vertical appears */
width: 100%;
/* prevents the overflow that leads to scrollbars, event without content */
margin: 0;
/* to really prevent scrollbars you can use overflow none, else use auto */
overflow: none;
}
In web development, I mostly apply the box-sizing property to all element, so they behave better in sizing with padding:
Does it hide elements vertically or horizontally? Or both?
If you want a “typical” scrollbar, overflow-y: auto; may help.
But when items are hidden are horizontally you may want to look into Vaadin’s FlexLayout and into general CSS Flexbox.
The FormLayout does also supports layout shifting on different screen sizes.