Question

我正在处理一个我正在进行的小项目的问题。我将在下面发布我的代码，但首先是我想要完成的事情和迄今为止的问题。

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

CSS

 body, html {
    background:white;
    margin:0;
    padding:0;
    font-family: 'Regular';
    -webkit-font-smoothing: antialiased;
    width:100%;
    min-height: 200%;
}

#home {
    position: absolute;
    width:100%;
    height: 100%;
    background-color: red;
    top:0;
    left:0;
    z-index: 3000;
}

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

HTML

<body>
    <div id="home"></div>
    <div id="content">
        first<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>sdfd<br/><br/><br/><br/>last<br/><br/><br/><br/>
    </div>

的 See Example Here 的

非常感谢任何指导。奖励积分可以帮助#home根据需要扩展高度，而不会在页面滚动时中断或覆盖部分#content。非常感谢你们！

Answer 1

你的意思是这样吗？

http://jsfiddle.net/xucqF/1/

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

}

Answer 2

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

<强> My Solution & Example of Expected Outcome

$(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");

        }


    });

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

CSS

HTML

2 个答案: