Mounted dimension left column and fluid proper column each with 100% top in CSS


In the event you want two (2) columns and need the left column to be a set dimension, however the suitable column to mechanically take the remaining dimension of the window, then you need to use the next resolution.

Observe the steps under, which embrace some CSS and a few HTML.

The CSS for our resolution

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

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

.left-column {
  place:mounted; /* <-- This prevents scrolling */
  high:0;
  left:0;
  width:235px;
  top: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>

Leave a Reply