3 column layout with sticky header

Question 1

How would I do the following layout in pure css.

3 columns with percentage based width, not px.

and a sticky header that is only in the middle column, not left/right.

When scrolling, over any! of the 3 column, only content in the middle column scrolls. Kind of how twitters layout is.

edit: this is what i got so far, the sticky header wont stick. when i scroll to the bottom, it "disappears" 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;
}


left
right

HEADER
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,

see below picture for what i mean

thank you

Question 2

flex, position: sticky, overflow.

* {
  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;
  
}


  
    left














left
  
  
    header
    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
    












      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













      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













      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      
    
  
  right

Question 3

Well, I believe this is what you asked. All parts using percentage based width, with the same layout, and only the main content scrolling.

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%;
}

Answer 1

0 Answer

wangyuanyuan86 注册会员
2023-01-26 05:00

flex, position: sticky, overflow.

* {
  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;
  
}


  
    left














left
  
  
    header
    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
    












      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













      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













      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      
    
  
  right

Agree 0 0Comment

dxh6258 注册会员
2023-01-26 05:00

Well, I believe this is what you asked. All parts using percentage based width, with the same layout, and only the main content scrolling.

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%;
}

Agree 0 0Comment

3 column layout with sticky header

3 column layout with sticky header

0 Comment

0 Comment

0 Comment

About the Author

Question Info

Related Question

将一个嵌套字典WITH STRING OBJECT转换为pandas数据框架

是谁?拼写检查真的很伤脑筋.Loesn5t auto fcorrupt fivd abd fix error gud with?

Working out a column value based on another column as a percentage value

在react with d3中创建函数,为值分配颜色

array_search()与array_column()是非常慢的,我怎么能加快这一点?

PrimNG表列过滤器(p-columnFilter)，设置一个默认选择

Dependence error: Not satisfied with the SQLITE3 dependency: >=3018000

tetgen进行四面体生成时有警告Warning: Point # is coincident with #. Ignored!

layout_alignEnd和layout_alignRight之间的区别是什么?(复制)

Powershell Export-CSV with the path as a variable