Question 1 of 30
In a web development project, you are tasked with creating a responsive layout for a webpage that includes a header, a main content area, and a footer. The header should occupy 20% of the viewport height, the footer should occupy 10% of the viewport height, and the main content area should fill the remaining space. If the viewport height is 800 pixels, what CSS properties would you use to achieve this layout using Flexbox, and how would you ensure that the main content area adjusts dynamically when the viewport height changes?
Use `display: flex; flex-direction: column;` on the container, set `height: 100vh;` for the container, `flex: 0 0 20%;` for the header, `flex: 0 0 10%;` for the footer, and `flex: 1;` for the main content area.
Use `display: grid; grid-template-rows: 20% 10% auto;` on the container, set `height: 800px;` for the container, and `height: auto;` for the main content area.
Use `display: block;` on the container, set `height: 800px;` for the header and footer, and `height: calc(800px - 80px);` for the main content area.
Use `display: inline-block;` on the container, set `height: 100%;` for the header and footer, and `height: 100%;` for the main content area.

Preparing for Microsoft 98-361 Software Development Fundamentals? Now land the interview.

73% of qualified candidates get rejected because of weak resumes. Build an ATS-optimized, recruiter-ready resume in under 5 minutes - free to start.

Build My Resume Free