Div height set as percentage of screen?

Dealing with parent element heights

Parent height prerequisites

Using a percentage height requires a defined height for the parent element. Usually, you'll want to set the html and body height to 100%:

html, body {
  height: 100%; /* Be as tall as you can be! */
}


This operation enables percentage-based heights to effectively reflect absolute viewport height.

Full screen scenario with absolute positioning

In case of ambiguous ancestor heights, use absolute positioning to expand a DIV to fill the entire screen:

.full-screen-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;  /* Corners covered, no escape! */
}


Mixing up units and styles

Hybrid solution: vh and percentage

Combine relative (percentage) and absolute (vh) units for more complex and flexible layouts:

.responsive-height {
  height: calc(70vh - 20%); /* More scales than a dragon! */
}


Such blend of adaptability and precision results in the DIV height responding to both, screen size and element context, in a fluid manner.

Full viewport coverage in responsive styling

In responsive design scenarios, employ 100vh to fill the entire screen's height:

.full-screen-responsive {
  height: 100vh;
  width: 100%;  /* Stretch Armstrong has nothing on us */
}


Here, the width and height are both set to accommodate the full viewport, ensuring the DIV scales fluidly with screen dimensions.

Dynamic control over height with JavaScript

For a heightened (pun intended) control, use JavaScript or libraries like jQuery to dynamically set the DIV height:

document.querySelector('.dynamic-height').style.height = window.innerHeight + 'px'; /* Tall today, short tomorrow */


This enforces a direct link between the viewport's current height and the div’s height, offering high responsiveness to window resizing.

Navigating potential layout challenges

Existing headers and the space they eat

When you have a layout that's already sporting a header, this could affect the remaining height available for your DIV:

.main-content {
  height: calc(100vh - 60px); /* 60px header? No problem! */
}


The calc() function helps negate the header’s height while ensuring your DIV still covers the appropriate percentage of screen space.

Ensuring cross-browser consistency

Different browsers may handle viewport units such as vh slightly differently. To keep cross-browser consistency, additional CSS fallbacks or JavaScript feature detection might be deemed necessary.

Pragmatic usage of inline styles

In certain cases, particularly one-off scenarios or rapid prototyping, inline styles serve their purpose notably:

<div style="height: 75vh;"></div>  /* Quick and dirty! */


However, external stylesheets foster easier maintenance and scalability for codebases in the long run.