Question

我正在React中编写一个单页应用程序。此应用中的所有页面都有标题和一些内容。标题是固定的，内容是可滚动的。为此，我将高度从100%标记开始设置为<html>到<Page>组件。 <Page>组件本身是一个具有固定高度标头的Flexbox，内容区域设置为flex: 1和overflow: auto以允许滚动。这是仅使用HTML和CSS的应用程序的简化结构：

＆＃13;

    * {
        box-sizing: border-box;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
        margin: 0;
        font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .scrolling-page {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        background-color: #eeeeee;
        height: 50px;
        font-size: 24px;
        line-height: 34px;
        padding: 8px;
    }

    .content {
        flex: 1;
        overflow: auto;
        padding: 8px;
    }

＆＃13;

<div class="scrolling-page">
<header class="header">
    Header
</header>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur
    mollitia maxime facere quae cumque perferendis cum atque quia
    repellendus rerum eaque quod quibusdam incidunt blanditiis possimus
    temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas
    assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque
    dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa
    cupiditate cum architecto! Facilis deleniti unde suscipit minima
    obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis
    alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
    nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
    vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
    nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
    vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
</div>
</div>

＆＃13;

我想现在创建一个不滚动的同一页面的版本，只占用页面所需的高度，而不是页面的100％。这需要从100%标记开始删除<html>高度。但是，由于这是一个单页应用程序，我不能两种方式。只有<html>，<body>等的一个实例。您是否看到了解决此问题的方法？

Answer 1

我不确定我是否会按照您的意图行事。如果它只是显示＆＃34;流体＆＃34;当内容不足以溢出视口时的高度版本和内容较大时带滚动条的固定100％视口版本，那么max-height 100vh和overflow auto就可以了。

单页应用的滚动和非滚动版本

1 个答案: