Monday, May 15, 2023
HomeSoftware EngineeringMounted measurement left column and fluid proper column each with 100% top...

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


For those who want two (2) columns and wish the left column to be a set measurement, however the suitable column to mechanically take the remaining measurement of the window, then you should use the next answer.

Comply with the steps beneath, which embrace some CSS and a few HTML.

The CSS for our answer

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 answer

<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