屏幕上的分页符（CSS多列布局）

Question

我想在HTML中显示多列文档。多列“框”在分页后重新开始打印。我想在屏幕上模拟这种行为（分页符），所以列高不应该高于用户代理窗口的高度。

只为每个虚拟页面使用一个新的容器将很容易，但我不知道屏幕到底在哪里结束，所以我希望文本能够在这些虚拟页面之间流动。

我知道今天的JS有必要的能力，但我想使用CSS，因为这是一个布局问题。

Answer 1

我有建议的功能。你可以回顶部按钮 页面的底部，为此，你可以继续这样 首页上放

<a name="Top"></a> 

，并在页面

<a href="#Top"> Back to Top… </a> 

的底部我知道这不是你寻找，但这将是用户友好和轻松导航。

Answer 2

尝试使用Javascript功能来设置容器DIV视口高度的高度，命令：

window.innerHeight 

完整剧本获得视尺寸： http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

，如果你不喜欢使用JavaScript，你可以尝试创建负责任的CSS样式，但它会不太准确。

Answer 3

我和这个问题中描述的完全一样。这是一个仅适用于我的目的的HTML/CSS解决方案，可能对其他人有用。它有一些潜在的缺点，我会在给出代码之前描述。在下面的讨论中，我将“子页面”一词用于提问者称之为“虚拟页面”的内容，即所需高度的一组水平连续内容列（注意文本从一个子页面的右下角继续到下一子页面的左上方。）

1. 它要求正在流过的内容转换成子页面的HTML多次重申的（虽然它仅在渲染输出中出现一次）。在内容是动态生成的情况下（就像在我的情况中一样，由于Wordpress函数调用），它可能不会产生任何困难来循环并产生内容的多个副本。
2. 它需要选择屏幕上可能出现的特定的任意最大数量的子页面;任何超出此范围的内容都会丢失。就我而言，该网站的目的意味着我知道最多可以有五个子页面，所以这不是真正的障碍。
3. 需要重复的CSS行序列，每个可能的子页面一个。如果以编程方式生成内容的重复出现，将一个必需的CSS属性内联到重复拷贝的“样式”属性中是很少的额外工作，这就是我在实践中所做的。 （为清晰起见，下面的示例将所有HTML和CSS分开。）
4. 可能是最重要的缺点：我找不到确切的方式（实际上）计算所得流动配置的高度（即子页数实际上需要适合所有的内容，乘以每个子页面的高度）。我不得不求助于一个可能非常粗糙的近似值。因此，如果在此近似值中附加的额外垂直高度足够大以确保没有任何文本会垂直裁剪，则有时会在布局的底部有很多垂直空白。再次，在我的情况下，subpaged布局是我的网页上发生的最后一件事情，所以底部的空格确实没有让我感到困惑。

行，到实际的代码。这里的基本策略很简单：多次将相同的文本分解成所需子页面高度的列。将产生的水平列组彼此堆叠在一起，但将每个连续的副本恰好移动到左侧的一个子页面宽度页面。最后，将整个堆栈（使用overflow:hidden;）剪切到子页面的宽度。关键的难点在于将剪辑div设置为正确的高度。如果CSS可以选择所有最后没有墨水的子页面单元时，它们会被直接裁剪掉，然后根本不显示它们，但是我找不到这样做的方法。我最终的粗略近似是在所需的子页面宽度和列结构中再次隐藏所有内容，并使用该布局的高度来确定裁剪的高度。但是，该布局总是比较短，因为将内容排列在一堆长列中比在连续的短列中更有效，而且还需要某种子页面分隔符或者子页面布局会变得非常混乱。所以我通过在这个剪辑中投入一个大的底部填充来欺骗这个div。如果CSS calc（）允许整数除法或舍入，可以做出更好的近似。最后，如果CSS区域起飞，整个任务将变得微不足道，但这看起来不太可能。

抱歉关于tl; dr; - 这里的代码，HTML，然后再CSS：

<div class="column-paginator"> 
    <div class="vertical-strut mypage-h vertical-fuzz"> 
     [COPY OF CONTENT HERE] 
    </div> 
    <div class="column-paginator-clipper"> 
     <div class="mypage-h mypage-v column-paginator-0"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-1"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-2"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-3"> 
      [COPY OF CONTENT HERE] 
     </div> 
     <div class="mypage-h mypage-v column-paginator-4"> 
      [COPY OF CONTENT HERE] 
     </div> 
    </div> 
</div> 

而现在的CSS：

div.column-paginator { 
    position:relative; /* Ensure we can anchor positions to this element */ 
} 
div.vertical-strut { 
    visibility: hidden; /* Only laying this out to get its height */ 
} 
div.vertical-fuzz { 
    padding-bottom: 300px; /* extra height because unpaginated text 
          * takes less vertical height. This is a 
          * crude measure. */ 
} 
div.mypage-h { 
    /* The desired horizontal setup of the column pagination */ 
    columns: 2 200px; 
    column-gap: 2em; 
} 
div.column-paginator-clipper { 
    /* The div that actually constrains the output */ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
} 
div.mypage-v { 
    /* the desired vertical setup of the column pagination */ 
    height: 300px; 
    position: relative; 
    overflow: visible; 
    margin-bottom: 1.5em; 
} 
div.mypage-v:after { 
    /* Automatically throw in subpage separator. */ 
    content: ""; 
    height:1em; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    width:500%; /* must be MAX_SUBPAGES * 100% */ 
    background: lightcyan; 
} 
/* Note the 2em below is precisely the column-gap above; not sure how 
* to enforce/encode that equality in CSS. 
*/ 
div.column-paginator-0 { left:calc(0 * (-100% - 2em)); } 
div.column-paginator-1 { left:calc(1 * (-100% - 2em)); } 
div.column-paginator-2 { left:calc(2 * (-100% - 2em)); } 
div.column-paginator-3 { left:calc(3 * (-100% - 2em)); } 
div.column-paginator-4 { left:calc(4 * (-100% - 2em)); } 
div.column-paginator-5 { left:calc(5 * (-100% - 2em)); }