小编Geo*_*rge的帖子

我试图在某些元素的剩余空间中设置一个垂直可滚动的 div。它们都没有固定的高度。

我得到的只是一个可以根据其内容进行调整的 Flexbox 元素，但我真正需要的是该元素填充空白空间，并且其内容只是滚动到那里。

小提琴代码

超文本标记语言

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more …

我在网页中有这样的结构，假设表格很长。

<header>\n   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>\n</header>\n<section>\n   <table style="width:100%">\n     <tr>\n       <th>Firstname</th>\n       <th>Lastname</th> \n       <th>Age</th>\n     </tr>\n     <tr>\n       <td>Jill</td>\n       <td>Smith</td> \n       <td>50</td>\n     </tr>\n     <tr>\n       <td>Eve</td>\n       <td>Jackson</td> \n       <td>94</td>\n     </tr>\n   </table>\n</section>\n<footer>\n   <h3><img src="//some_image.jpg"/> 2016 \xc2\xa9 The report company</h3>\n</footer>\n

我需要的是打印这张长表格，但在每一页中重复我的页眉和页脚。

像这样

我已经尝试过position:fixed页眉和页脚，但问题是内容在每个页面的页眉和页脚下切片。

CSS3 规则在 Chrome 中无效。

我没有找到任何 js 的解决方案。

有任何想法吗？

我想在一个 4000 像素宽度的 3 个不同部分的网页上显示一个非常宽的视频（12000 像素），如下图所示

我知道这可以用画布来完成，但我真的无法让它工作。

我已经看到了一些例子，但我没有特别发现这种情况。在此先感谢您的帮助。

- 编辑 -

理想的解决方案是在这支笔中使用动画 http://www.codepen.io/sephhh/pen/OVpELO?editors=1010

<canvas id="myCanvas" height=200 width=200 style="border:1px solid #000000;"></canvas>

// set up initial variables
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(100,200);
ctx.stroke();

function drawCircle(x){
  ctx.beginPath();
  ctx.arc(x,100,10,0,2*Math.PI);
  ctx.fillStyle="red";
  ctx.fill();
}
var x = 0;
setInterval(function(){ 
  ctx.clearRect(0,0,200,200);
  drawCircle(x%200);
  x++;
}, 25);

具有与从第一部分开始相同的效果，并使用类似于本示例中的画布在矩形中展开的内容继续其他部分：http : //craftymind.com/factory/html5video/CanvasVideo.html

我想要一个第一列为 50px 的网格，最后一列也为 50px，中间的所有列（不知道列数）都有 1fr。

我尝试过grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px;但没有运气。

body {
    font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container {
    background:peru;
    padding:10px;
    display:grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr));

    /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}
.container div {
    background:#f0ff00;
    margin:5px;
    padding:5px;
    text-align: center;
    color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item …