6

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

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

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

4

3 回答 3

2

我的愿望与这个问题中描述的完全一样。这是一个 HTML/CSS-only 解决方案，对我的目的来说效果很好，并且可能对其他人有用。它有一些潜在的缺点，我将在给出代码之前对其进行描述。在下面的讨论中，我使用“子页面”这个词来表示提问者所说的“虚拟页面”，即一组具有所需高度的水平连续内容列（注意文本从一个子页面的右下角延续到下一个子页面的左上角。）

  1. 它要求流入子页面的内容在 HTML 中重复多次（尽管它在呈现的输出中只出现一次）。在动态生成内容的情况下（在我的情况下，作为 Wordpress 函数调用的结果），循环和生成内容的多个副本可能不会造成任何困难。
  2. 它需要选择屏幕上可以出现的特定的、任意的最大子页面数；任何超出此范围的内容都会丢失。就我而言，网站的目的意味着我知道最多可以有五个子页面，所以这不是真正的障碍。
  3. 需要一个重复的 CSS 行序列，每个可能的子页面一个。如果内容的重复出现是以编程方式生成的，那么将所需的 CSS 属性内联到重复副本的“样式”属性中几乎不需要额外的工作，这就是我在实践中所做的。（为清楚起见，下面显示的示例将所有 HTML 和 CSS 分开。）
  4. 可能是最显着的缺点：我找不到一种精确的方法来（实际上）计算生成的流动配置的高度（即，实际需要适合所有内容的子页面数量乘以每个子页面的高度）。我不得不求助于一个可能相当粗糙的近似值。因此，如果在这个近似值中附加的额外垂直高度足够大，以确保不会垂直剪切任何文本，那么有时布局底部会有很多垂直空白。同样，在我的情况下，子页面布局是我网页上发生的最后一件事，所以底部的空白并没有让我感到不安。

好的，到实际的代码。这里的基本策略很简单：将相同的文本多次拆分为所需子页面高度的列。将生成的水平列组堆叠在一起，但将每个连续副本向左移动一个子页面宽度的页面。最后，将整个堆栈（用overflow:hidden;）剪辑到子页面的宽度。关键的困难是得到那个剪辑div成为正确的高度。如果可以对所有子页面单元进行 CSS 选择，这些子页面单元在被剪切时最终没有墨水，然后根本不显示它们，那将很简单，但我找不到这样做的方法。我最终得出的粗略近似是在所需的子页面宽度和列结构中再次无形地布置所有内容，并使用该布局的高度来确定剪辑的高度。但是，这种布局总是更短，因为将内容放在一堆长列中比在连续的短列块中布局更有效，而且您需要某种子页面分隔符，否则子页面布局会变得非常混乱。所以我只是在那个剪报中加入一个大的底部填充物来捏造这个div. 如果 CSS calc() 允许整数除法或舍入，则可以做出更好的近似。最后，如果 CSS Regions 起飞，整个任务将是微不足道的，但这看起来不太可能。

对不起 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)); }
于 2018-02-27T02:36:04.583 回答
0

尝试使用 Javascript 将 container-div 的高度设置为视口高度，命令：

window.innerHeight

获取视口尺寸的完整脚本：http: //andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

于 2012-09-08T16:15:07.553 回答
0

我建议了功能。你可以在页面底部有返回顶部按钮，为此你可以像这样在首页放置

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

并在页面底部

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

我知道这不是您要找的，但这将是用户友好且易于导航的。

于 2012-09-08T15:30:23.373 回答