QR code component, built with CSS and HTML
Design comparison
Solution retrospective
What is the best way to define height and width CSS properties for the HTML and body tags, in a responsive webpage?
Community feedback
- @derwingPosted almost 2 years ago
I don't like to think in terms of "the best way" as it all depends on your needs. But to set the height and width of the html and body elements in CSS, you can use the height and width properties. For example:
Copy code html { height: 100%; }
body { width: 800px; height: 600px; } This will set the height of the html element to 100% of the viewport height and the width of the body element to 800 pixels. The height of the body element will be set to 600 pixels.
It's important to note that the html and body elements are block-level elements, which means that they take up the full width of their parent container by default. If you want to set a specific width for the html or body elements, you will need to set the width property as shown above.
You can also use the min-height and min-width properties to set the minimum height and width of the html and body elements. For example:
Copy code html { min-height: 100%; }
body { min-width: 800px; min-height: 600px; } This will set the minimum height of the html element to 100% of the viewport height and the minimum width of the body element to 800 pixels. The minimum height of the body element will be set to 600 pixels.
You can also use body { min-height: 100vh; }
Marked as helpful0 - @SinisaVukmirovicPosted almost 2 years ago
Hello!
You don't define width for the HTML and body elements.
For the height, most common way to do define it is
body { min-height: 100vh; }
Most of the time, that is enough. Some browser, thought, also require
html { height: 100%: }
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord