Fixed Size Left Column and Fluid Right Column Both With 100% Height in CSS

If you need two (2) columns and want the left column to be a fixed size, but the right column to automatically take the remaining size of the window, then you can use the following solution.

Follow the steps below, which include some CSS and some HTML.

The CSS for our solution

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.page-wrapper {
  height: 100%;
  position: relative;
}

.left-column {
  position:fixed; /* <-- This prevents scrolling */
  top:0;
  left:0;
  width:235px;
  height:100%;
  background:#090909;
}

.right-column {
  margin-left:235px;
  background:yellow;
  min-height:100%;  /* <-- Allows the content to grow */
}

The HTML for our solution

<div class="page-wrapper">
  <div class="left-column"></div>
  <div class="right-column">
    This is the content.
  </div>
</div>