CSS：将元素停靠到页面底部，并将其从上到下停靠到上元素？

我需要将一个元素粘合到底部和顶部，但我想在顶部保留一个动态空间，让另一个元素进入，我希望

top

是元素大小+一些空间

这怎么可能（首选纯CSS）

就是一个例子：

HTML:

---

这可能对您有用：

---

在main content div之外创建一个

，并给它一个

位置：relative

不确定是否使用css，但js您可以尝试以下方法：

document.getElementById('header').style.top = document.getElementById('newelement').style.height;

---

正确地插入新元素。

现在唯一的解决方案是为所有元素提供

%

高度

---

希望在将来的某个时候，我们都能够使用新的CSS来完成您所需要的

这是一个令人困惑的句子。你能发布一个屏幕截图/ascii艺术的期望结果吗？问题更新，如果必要的话会扩展更多。屏幕截图会很精彩。你想让它“粘到上一个元素和底部”？？？或“如果元素比页面小，就坚持到底；如果元素比页面大，就坚持到底？@CarlSaldanha嘿，你现在得到了你的答案。这将如何影响当前的div，我希望它的顶部是依赖的？这是不可能的。我需要页面在任何屏幕大小上都兼容，同时保持页眉和页脚的固定大小。我想可能就是这样。看起来你不能做一个只有CSS的解决方案。如果我是你的话，我会尝试下一个JavaScript解决方案。我认为CSS3已经具备了一切：（糟糕的解决方案。我以前是Silverlight开发人员。HTML+CSS3很酷，但XAML更酷、更高效。我希望他们能制作一个纯HTML+CSS3+JS客户端代码生成器，而不是Silverlight插件，这样我们就可以继续编写SL。生活很糟糕，SL已经死了……我还想知道是否有办法让页面滚动条只控制“内容”区域，就像我们在页面中看到的那样。另外，根据我的CSS，有没有办法避免在所有元素上设置class

center

？

.center
{
    width: 200px;
    margin-left: auto;
    margin-right: auto;  
    right: 0px;
    left: 0px;
}

#header
{
    background: green;
    color: white;  
    height: 50px;
    position: fixed;    
    top: 0px;    
}

#slider
{
    height: 60px;
    position: fixed;
    top: 60px;
}
#slider img
{
    max-width: 100%;
}

#content
{
    background: beige;    
    height: 50px;
    bottom: 10px;
}

footer
{      
    background: blue;
    color: white;  
    height: 50px;
    position: fixed;    
    bottom:0px;
}

document.getElementById('header').style.top = document.getElementById('newelement').style.height;