带粘性的 3 列布局 header

Question

如何在纯 css.

中进行以下布局

3 列宽度基于百分比，而不是像素。

和仅在中间栏中的粘性 header，而不是 left/right。

滚动时，超过任何！在第 3 列中，只有中间列的内容滚动。 Twitter 的布局是怎样的。

编辑：这是我到目前为止得到的，粘性 header 不会粘住。当我滚动到底部时，它“消失” https://jsfiddle.net/pkrbc7dm/

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.left,.right{width:20%;top: 0; bottom: 0px;position: fixed;}
.left,.center,.right,.bodywrap{height:100%}
.center{margin:0 20%;}
.left{left:0}
.right{right:0}

.left{background-color:#aaa}
.right{background-color:#ccc}

.head2{
  background-color:tomato;
  width:100%;
  position:sticky;
  top:0;
}

<div class='wrap'>
  <div class='left'>left</div>
  <div class='right'>right</div>
  <div class='center'>
    <div class="head2">HEADER</div>
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
    hello world, hello world, hello world, hello world, hello world, 
  </div>
</div>

看下图了解我的意思

谢谢

Answer 1

嗯，我相信这就是你问的。所有部分都使用基于百分比的宽度，具有相同的布局，并且只有主要内容滚动。

body {
  margin: 0px;
}

.left-column {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: lightblue;
  top: 0;
}

.right-column {
  width: 25%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  background-color: lightblue;
}

.main-content {
  margin: 0% 25%;
  width: 50%;
}

.topbar {
  background-color: black;
  width: 50%;
  height: 50px;
  position: fixed;
  z-index: 10;
}

.content {
  padding-top: 60px;
}

.content>img {
  width: 100%;
}

<div class="left-column"></div>
<div class="main-content">
  <div class="topbar"></div>
  <div class="content">
    <img src="https://www.nicepng.com/png/full/862-8628237_random-image-from-user-minecraft-logo-coloring-pages.png">
    <img src="https://www.nicepng.com/png/full/862-8628237_random-image-from-user-minecraft-logo-coloring-pages.png">
  </div>
</div>
<div class="right-column"></div>

Answer 2

配方：弹性，位置：粘性，溢出。

* {
  padding:0;
  margin: 0;
}

.w {
  display: flex;  
  gap: 5px;
  overflow: hidden;
}

.w > div {
  height: 100vh;
  background: gray;  
}

.l, .r {
  width: 20%;
}

.m {
  width: 100%;
}
.l, .r {
  position: -webkit-sticky;
  position: sticky;
  top: 0;  
}
.r {
  background: blue;
}

.content {
  background: green;
  height: 100%;
  overflow: scroll;
  
}

<div class="w">
  <div class="l">
    left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>left
  </div>
  <div class="m">
    <div class="h">header</div>
    <div class="content">content content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content content
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      content content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content content
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      content content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content content
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      content content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content contentcontent content content content content      
    </div>
  </div>
  <div class="r">right</div>
</div>

带粘性的 3 列布局 header

3 column layout with sticky header

css