html - CSS 固定缩放 header ，滚动主体，无法到达底部文本

Question

我正在为一个页面寻找一个纯 CSS/HTML 解决方案，该页面包含一个固定位置的标题，该标题随其内容缩小 - 即使在浏览器中更改字体大小时 - 以及一个占据剩余部分的滚动主体 window 。下面的代码完成了大部分我想要的，但我看不到整个文本。在 this jsfiddle你无法看到或到达“A 文本 20”或最后一个 <p>一旦窗口小到需要滚动。 html 中的两个链接指向彼此的 anchor ；你无法到达底部。

大多数(如果不是全部)类似问题的解决方案不仅仅使用我想避免的纯 HTML/CSS。

CSS:

body,html{
    margin:0;padding:0;left:0;top:0;
    max-height:100%;
    height:100%;
}
#Wrapper{
    width:100%;
    max-height:100%;
    height:100%;
    position:fixed;
    background-color:green;
}
#mastheadChild{
    text-align:center;
    background-color:brown;
}
#mainWrapper {
    background-color:red;
    height:100%;
    max-height:100%;

}
#mainChild{
    background-color:blue;
    max-height:100%;
    height:100%;
    overflow-y:scroll;
  }
a{
    color:white;
    background-color:black;
}

HTML:

        <div id="Wrapper">
        <div id="mastheadChild">
                <p>This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very wide masthead child </p>
        </div>
        <div id="mainWrapper">
            <div id="mainChild">
                    <h4>main scrolling</h4>
                    <p>This is a text, a <a href="#last">very</a>, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very wide text.</p>
                    <p>A text  1</p>
                    <p>A text  2</p>
                    <p>A text  3</p>
                    <p>A text  4</p>
                    <p>A text  5</p>
                    <p>A text  6</p>
                    <p>A text  7</p>
                    <p>A text  8</p>
                    <p>A text  9</p>
                    <p>A text  1</p>
                    <p>A text 10</p>
                    <p>A text 12</p>
                    <p>A text 13</p>
                    <p>A text 14</p>
                    <p>A text 15</p>
                    <p>A text 16</p>
                    <p>A text 17</p>
                    <p>A text 18</p>
                    <p>A text 19</p>
                    <p>A text 20</p>
                    <p id="last">link <a href="#mainChild">to first</a> text</p>
            </div>
            </div>
        </div>

Answer 1

wrapper 的内容比 wrapper 本身长，并且无法滚动 wrapper。

如果您向包装器添加滚动条:

溢出-y:滚动

然后您可以访问包装器 View 之外的内容。

这是一个 fiddle :https://jsfiddle.net/96mp9mvf/2/