Исправлен заголовок в верхней части прокрученного списка. Flex Layout со всеми столбцами одинаковой высоты

Question

Кажется, что это не помогает. Хотите добавить фиксированный заголовок к синим и зеленым div, которые не прокручиваются с помощью div. Что делает это сложным является:

• Красный холст на левом является единственным элементом, который сжимается по ширине
• Холст элемент сохраняет соотношение ширина/высота, также сокращается по высоте
• Как Холст сжимается в высоту, как синий и зеленый divs также сжимаются по высоте.

JSFiddle

HTML

<div class="container"> 
    <div class="left"> 
    <canvas id="draw" width="250" height="300"></canvas> 
    </div> 
    <div class="center"><div id="center" class="scroll"></div></div> 
    <div class="right"><div id="right" class="scroll"></div></div> 
</div> 

CSS

.container { 
    max-width: 650px; 
    margin: 0 auto; 
    border: 1px solid black; 
    display: flex; 
} 
.container > div { 
    position: relative; 
    min-width: 0; 
} 
.left { 
    max-width: 250px; 
    width: auto; 
} 
.left canvas { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 
.center { 
    flex: 0 0 200px; 
    overflow-y: scroll; 
    background-color: blue; 
} 
.right { 
    flex: 0 0 200px; 
    overflow-y: scroll; 
    background-color: green; 
} 
.scroll { 
    position: absolute; 
    width: 100%; 
} 

JavaScript

var c = document.getElementById("draw"); 
ctx = c.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, 250, 300); 
ctx.fillStyle = "white"; 
ctx.font = "bold 40pt Arial"; 
ctx.fillText("CANVAS", 10, 100); 

tmp = ""; 
for (var i = 0; i < 100; i++) { 
    tmp += "<p>" + i + "</p>"; 
} 

document.getElementById("center").innerHTML = tmp; 
document.getElementById("right").innerHTML = tmp; 

Answer 1

Хотите добавить фиксированный заголовок синего и зеленого дивы, не прокручивать с DIV

Проверьте следующие работы для вас:

var c = document.getElementById("draw"); 
 
ctx = c.getContext("2d"); 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(0, 0, 250, 300); 
 
ctx.fillStyle = "white"; 
 
ctx.font = "bold 40pt Arial"; 
 
ctx.fillText("CANVAS", 10, 100); 
 

 
tmp = ""; 
 
for (var i = 0; i < 100; i++) { 
 
    tmp += "<p>" + i + "</p>"; 
 
} 
 

 
document.getElementById("center").innerHTML = tmp; 
 
document.getElementById("right").innerHTML = tmp;

.container { 
 
    max-width: 650px; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
    display: flex; 
 
} 
 
.container > div { 
 
    position: relative; 
 
    min-width: 0; 
 
} 
 
.left { 
 
    max-width: 250px; 
 
    width: auto; 
 
    flex: 1; 
 
} 
 
.left canvas { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.center { 
 
    flex: 0 0 200px; 
 
    background-color: #0000ff; 
 
} 
 
.right { 
 
    flex: 0 0 200px; 
 
    background-color: green; 
 
} 
 
.scroll { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 40px; 
 
    bottom: 0; 
 
    overflow-y: auto; 
 
} 
 
.header { 
 
    height: 40px; 
 
    line-height: 40px; 
 
} 
 
.center .header { 
 
    background-color: #aaaaff; 
 
} 
 
.right .header { 
 
    background-color: #aaff00; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <canvas id="draw" width="250" height="300"></canvas> 
 
    </div> 
 
    <div class="center"> 
 
    <div class="header">fixed header</div> 
 
    <div id="center" class="scroll"></div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="header">fixed header</div> 
 
    <div id="right" class="scroll"></div> 
 
    </div> 
 
</div>