Html 允许固定div随内容在高度上扩展

我有一个小项目，我正在工作的问题。我将在下面发布我的代码，但首先是我要完成的工作和我目前遇到的问题

我有一个绝对定位的div（#home）定位在页面的左上角：0，宽度和高度为浏览器的100%。然后我有一个固定的div（#content），它的位置与#home，top/left:0相同。#home上的z索引高于#content上的z索引，允许#home位于#content之上，并在滚动页面时显示#content。我必须为我的身体设置一个高度，html元素允许页面滚动。我的问题是固定div-如何允许此div随内容在高度上扩展（溢出），而不在页面底部被截断？最小高度不起作用

CSS HTML

/>

sdfd

$(window).scroll(function(){

        var winheight = $("#home").height();

        var curr = $(window).scrollTop();

        if(curr >= winheight){

            $("div.pagesContainer").attr("id", "pagesAlt");

        }
        else
        {

            $("div.pagesContainer").attr("id", "pages");

        }


    });

非常感谢您的指导。额外的帮助积分允许“主页”根据需要扩展高度，而不会中断或覆盖页面滚动上的部分内容。非常感谢你们

你是说像这样吗

---

我已经通过使用简单的jQuery解决了我的问题。我希望我能找到一个CSS替代方案，但我发现解释我的问题和预期结果和解决问题本身一样困难。希望这个工作示例能更好地演示我所指的内容，如果有更有效的替代方案，你们都可以告诉我

$(window).scroll(function(){

        var winheight = $("#home").height();

        var curr = $(window).scrollTop();

        if(curr >= winheight){

            $("div.pagesContainer").attr("id", "pagesAlt");

        }
        else
        {

            $("div.pagesContainer").attr("id", "pages");

        }


    });

---

你能给我们看张照片吗。你希望做什么？看起来你想让“家”随时覆盖整个内容？这是一种奇怪的要求。他想让首页内容一目了然，当你向下滚动时，你可以看到content div的所有内容，而现在你只能看到早期的单词，因为高度没有一次调整以适应所有内容。他想要修理it@kingking不完全是这样-我希望主页只覆盖页面顶部100%的内容。当页面滚动时，“主页”向上滚动，显示固定的div内容。我的问题是允许内容按照上述div的要求在高度上扩展。到目前为止，#内容从底部删除内容。希望这足够清楚。谢谢@艾哈迈德斯卡亚，没错！我想我也可以问一下，是否有一种更简单、更成熟的方法来实现我想要的结果。我希望“主页”是浏览器的100%宽度和高度（不是整个页面，而是视口/浏览器）。当页面滚动时，我希望“主页”向上滚动，显示下方的div内容。内容大约是浏览器高度的300%，但我需要“内容”能够调整内容的高度，因为当调整页面大小时，“内容”上的额外高度可能是必要的。我认为在内容上创建一个绝对的div（#home）是可行的。不，谢谢。我希望下一个div（#content）是固定的，因此当页面滚动时，该div会显示在上一个div（#home）的下面。这就是为什么我需要修复内容——但我希望有一种方法可以让这个div根据内容的需要自动扩展高度。

#content {
    width:100%;
    min-height: 200%;
    background-color: blue;
    position: absolute;
    top:0;
    left: 0;
    z-index:2000;

}

$(window).scroll(function(){

        var winheight = $("#home").height();

        var curr = $(window).scrollTop();

        if(curr >= winheight){

            $("div.pagesContainer").attr("id", "pagesAlt");

        }
        else
        {

            $("div.pagesContainer").attr("id", "pages");

        }


    });