Thursday, May 18, 2023
HomeSoftware EngineeringMounted dimension left column and fluid proper column each with 100% peak...

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


Should you want two (2) columns and wish the left column to be a set dimension, however the suitable column to routinely take the remaining dimension of the window, then you should utilize the next resolution.

Comply with the steps beneath, which embrace 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:mounted; /* <-- 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>
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments