Make A Div Fill The Rest Of The Page (cross-browser)
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%;
}<divclass="rb"><divclass="top"><divclass="buffer">
1<br/>2<br/>3<br/>4<br/></div></div><divclass="myME"><divclass="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 :
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><divclass="rb"><divclass="top">1<br/>2<br/>3<br/>4<br/></div><divclass="myME">abc</div></div></body></html>I hope this helps you
Post a Comment for "Make A Div Fill The Rest Of The Page (cross-browser)"