CSS and JavaScript Solutions for Making DIV Height Fit the Browser Window

Problem Analysis

The user's code attempts to set two DIVs inside a container to fit the browser window height using height: 100%; in the child DIVs. However, this approach fails because percentage heights in CSS are relative to the parent element's height, and the parent container has height: auto;, which doesn't provide an explicit height for reference.

Solution 1: Using Absolute Positioning

One effective solution is to use absolute positioning. By setting the DIVs to position: absolute; and specifying top: 0; and bottom: 0;, they can stretch to fill the available height relative to the nearest positioned ancestor or the initial containing block.

.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}
.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
}

This method ensures that the DIVs occupy the full height of the browser window, but it requires careful management of positioning contexts.

Solution 2: Using JavaScript/jQuery for Dynamic Height

Another approach is to use JavaScript or jQuery to dynamically set the height based on the window's inner height. This is useful when you need to respond to window resizing events.

.div1 {
  float: left;
  width: 25%;
}
.div2 {
  float: left;
  width: 75%;
}
$(function(){
  $(".div1, .div2").css({ height: $(window).innerHeight() });
  $(window).resize(function(){
    $(".div1, .div2").css({ height: $(window).innerHeight() });
  });
});

This solution provides flexibility but adds JavaScript dependency.

Supplementary Solution: CSS Viewport Units

As mentioned in other answers, a modern CSS approach is to use viewport percentages (vh). For example, height: 100vh; sets the element's height to 100% of the viewport height.

.div1 {
  height: 100vh;
  width: 25%;
}
.div2 {
  height: 100vh;
  width: 75%;
}

This is a clean solution but may not be supported in older browsers like Internet Explorer below version 9.

Comparison and Best Practices

Each method has its pros and cons. Absolute positioning is pure CSS but can affect layout flow; JavaScript-based methods offer dynamic adjustment but increase complexity; viewport units are elegant but have compatibility limitations. For modern web development, a combination of CSS viewport units with fallbacks might be ideal.

In conclusion, to set DIV height to fit the browser window, consider the context and requirements. For static layouts, absolute positioning or vh units work well; for dynamic resizing, JavaScript is necessary.