Question

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

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

这是一个小小提琴;

＆＃13;

.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 {

}

＆＃13;

<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>

＆＃13;

以下是真实情况的示例：

我希望第一张图片中的标题保留在原位，而我想要的其他所有内容都可以向下滚动。

它需要有点像这样的问题：link但是滚动条不会延伸到页脚，或者在这种情况下是标题。

这有可能吗？

Answer 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>

固定div里面的div与其他div滚动

1 个答案: