固定 div 内 div 与其他 div 滚动答案

【问题标题】：Fixed div inside div with other div scrolling固定 div 内 div 与其他 div 滚动
【发布时间】：2016-12-22 18:45:29
【问题描述】：

非常抱歉标题不清楚，但我不知道如何在标题中描述它。

我在内容层中有 2 个 div。 1 个 div 我希望保持固定，另一个 div 我希望能够滚动，但我自己无法做到。

这是一个小小提琴；

.contentlayer {
    text-align: center;
}
.innerlayer {
    animation: fadein 2s;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: dodgerblue;
    min-width: 50%;
    max-width: 50%;
    border: 1px solid black;
    height: auto;
    overflow-y: auto;
    max-height: 80%;
}
.header {
    position: fixed;
}
.content {

}

<html>
    <head>
        <title>Css Static Test</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="innerlayer">
            <div class="contentlayer">
                <div class="header">
                    I want this div to stay in place. but also stay in the same position as if it weren't fixed, this will be a header.
                </div>
                <div class="content">
                    test
                    <script>
                        for(i = 0; i < 100; i++) {
                            document.write("<br>");
                        }
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

以下是真实事物外观的示例：

我希望第一张图片中的标题保持原位，而我希望能够向下滚动的所有其他内容。

它需要有点像这个问题：link，但滚动条没有延伸到页脚，或者在这种情况下，是页眉。

有什么办法可以做到吗？

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

.contentlayer {
    text-align: center;
}
.innerlayer {
    animation: fadein 2s;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: dodgerblue;
    min-width: 50%;
    max-width: 50%;
    border: 1px solid black;
    height: 80%;
}
.header {
    position: fixed;
    height:15%;
    width:100%;
    background:#f00;
}
.content {
  bottom:0;
  overflow-y:auto;
  height:80%;
  width:100%;
  position:fixed;
}

<html>
    <head>
        <title>Css Static Test</title>
    </head>
    <body>
        <div class="innerlayer">
            <div class="contentlayer">
                <div class="header">
                    I want this div to stay in place. but also stay in the same position as if it weren't fixed, this will be a header.
                </div>
                <div class="content">
                    test
                    <script>
                        for(i = 0; i < 20; i++) {
                            document.write("<br>line"+i);
                        }
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

啊，当我添加宽度时它起作用了：100%；到 .content 但最高：17%；真的不起作用，我需要它自动进入.header。有什么办法可以做到吗？
谢谢！我只是在我的真实网站上对其进行测试，然后如果它确实有效，则将您的答案标记为已回答：D
遗憾的是，它似乎不适用于我的正常网站，因为它将标题放在左侧，并且所有内容都在彼此内部，并且文本在内容 div 下方延伸。这是小提琴的链接：link 我真的不知道如何在不使用 height: 10%; 的情况下解决这个溢出等问题。但使用类似 height: auto;
1) 添加到.header > width:100%; 2) 高度：自动；如果您不将其设置为 100% - .content:height; 在某些情况下会溢出检查修改后的答案
这适用于标题，如果您再次检查，正文仍在标题内。很抱歉，我自己无法解决这个问题，但我讨厌 css，因为这个大声笑。你知道我该如何解决这个问题，并且它会自动在标题下吗？