Question

我正在寻找一个纯CSS / HTML解决方案，用于包含固定位置标题的页面，该标题缩小了内容的大小 - 即使在浏览器中更改字体大小时 - 以及占用剩余部分的滚动主页的窗口。下面的代码完成了我想要的大部分内容，但我无法看到整篇文章。在this jsfiddle中，您无法看到或触及“文字20＆＃39;或者一旦窗口小到需要滚动，最后<p>。 html中的两个链接指向彼此的锚点;你无法触及底层。

大多数（如果不是全部）类似问题的解决方案使用的不仅仅是纯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

包装器的内容比包装器本身长，并且无法滚动包装器。

如果您向包装器添加滚动：

overflow-y:scroll

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

这是一个小提琴：https://jsfiddle.net/96mp9mvf/2/

CSS固定缩放标头，滚动主，不能到达底部文本

1 个答案: