Fastened measurement left column and fluid proper column each with 100% peak in CSS

In the event you want two (2) columns and wish the left column to be a hard and fast measurement, however the proper column to routinely take the remaining measurement of the window, then you should use the next resolution.

Comply with the steps under, which embody some CSS and a few HTML.

The CSS for our resolution#

html, physique {
  peak: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.page-wrapper {
  peak: 100%;
  place: relative;
}

.left-column {
  place:fastened; /* <-- This prevents scrolling */
  high:0;
  left:0;
  width:235px;
  peak:100%;
  background:#090909;
}

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

The HTML for our resolution#

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