javascript - 四格列布局，一格固定(粘性)

Question

我正在尝试创建一个包含四列的布局，其中 div 4 粘在桌面和平板电脑上，并将隐藏在移动设备中。我从这个位置尝试了几种方法，溢出等等，但仍然无法弄清楚。请问有什么解决办法吗？ This is the layout

这是我的代码:

  .div1 {
  float: left;
  width: 45%;
}

.div2 {
  display: inline-block;
  width: 30%;
}

.div3 {
  display: inline-block;
  width: 20%;
}

.div4 {
  float: right;
  width: 10%;
}


/*For tablets*/

@media (max-width:767px) {
  .div1 {
    width: 45%;
  }
  .div2 {
    width: 45%;
  }
  .div3 {
    width: 100%;
  }
  .div4 {
    width: 10%;
  }
  /*For mobile*/
  @media (max-width:320px) {
    .div1 {
      width: 100%;
    }
    .div2 {
      width: 100%;
    }
    .div3 {
      width: 100%;
    }
    .div4 {
      display: none;
    }
  }

<div class="homesection">
  <div class="div1">Column 1</div>
  <div class="div2">Column 2</div>
  <div class="div3">Column 3</div>
  <div class="div4">Column 4</div>
</div>

Answer 1

看看这些是否有帮助..

(我没有使用任何 js 作为粘性，只是位置:固定)

body { 
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.container, .first3, .div1, .div2, .div3, .div4 { 
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
.div1, .div2, .div3, .div4 { 
  overflow: hidden;
}
.container {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  height: 100%;
}
.first3 {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100%;
  font-size: 40px;
}
.div1 {
  width: 43.33%;
  background-color: hsla(0, 0%, 10%, 1);
}
.div2 {
  width: 33.33%;
  background-color: hsla(0, 0%, 20%, 1);
}
.div3 {
  width: 23.33%;
  background-color: hsla(0, 0%, 30%, 1);
}
.div4 {
  position: fixed;
  top: 0; right: 0;
  display: flex;
  width: 10%;
  background-color: hsla(0, 0%, 40%, 1);
}

@media (max-width: 767px) {
  .first3 { width: 100%; font-size: 16px; }
  .div1 { width: 45%; height: 50%; }
  .div2 { width: 45%; height: 50%; } 
  .div3 { width: 100%; height: 50%; }
  .div4 { 
    position: fixed;
    top: 0; right: 0;
    height: 50%; 
  }
}

@media (max-width: 320px) {
  .first3 { width: 100%; }
  .div1 { width: 100%; height: auto; }
  .div2 { width: 100%; height: auto; } 
  .div3 { width: 100%; height: auto; }
  .div4 { display: none; }
}

<div class="container">
  <div class="first3">
    <div class="div1">
Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler div 1 Content filler div 1 content filler
    </div>
    <div class="div2">
Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler div 2 Content filler div 2 content filler
    </div>
    <div class="div3">
Content filler div 3 content filler div 3 Content filler div 3 content filler div 3 Content filler div 3 content filler div 3
    </div>
  </div>
  <div class="div4">
Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler div 4 Content filler div 4 content filler
  </div>
</div>

fiddle

https://jsfiddle.net/Hastig/ogvn03oc/2/