全屏（定宽+自适应）position

全屏（定宽+自适应）position

by DarcyAn

HTML

<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right"><div class="help-right">right</div></div>
<div class="bottom">bottom</div>
</div>

CSS

html, body, .parent {height: 100%; overflow: hidden;}
.top {
  position: absolute;
  top: 0; 
  left: 0; right: 0;
  height: 100px;
  background: skyblue;
}
.left {
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 50px;
  width:200px;
  background: pink;
}
.right {
  position: absolute;
  left: 200px;
  right: 0;
  top: 100px;
  bottom: 50px;
  overflow: auto;
  background: snow;
}
.help-right {
  width: 1000px;
  height: 1000px;
}
.bottom{
  position: absolute;
  bottom: 0; 
  left: 0; right: 0;
  height: 50px;
  background: skyblue;
}