Make A Div Fill The Rest Of The Page (cross-browser)

July 31, 2022 Post a Comment

I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much w

Solution 1:

for older and newer browsers , the display:table properties could match your requirement.

html,
body,
.rb {
  margin: 0;
  height: 100%;
}

.rb {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.top, .myME {
  display: table-row;
}

.buffer {
  display: table-cell;
}

.top .buffer {
  background: lightblue;
}

.myME .buffer {
  background: tomato;
  height:100%;
}

<div class="rb">
  <div class="top">
    <div class="buffer">
      1<br/>2<br/>3<br/>4<br/>
    </div>
  </div>
  <div class="myME">
    <div class="buffer">
      abc
    </div>
  </div>
</div>

the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.

Solution 2:

If top div is a fixed size ( just change size in both heights in top div and calc function ) you can try this :

Baca Juga

body {
  margin: 0
}

.rb {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 100px;
}

.myME {
  width: 100%;
  height: calc( 100% - 100px);
  background: grey;
}

html,
body {
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="rb">
    <div class="top">1<br/>2<br/>3<br/>4<br/></div>
    <div class="myME">abc</div>
  </div>
</body>

</html>

I hope this helps you

JavaScript Exercises

Make A Div Fill The Rest Of The Page (cross-browser)

Solution 1:

Solution 2:

Post a Comment for "Make A Div Fill The Rest Of The Page (cross-browser)"