0

我需要将一个元素粘合到底部和顶部，但我想从顶部保持另一个元素进入的动态空间，我希望top是那个元素大小+一些空间。

这怎么可能（首选纯 CSS）？

这是一个例子：

HTML：

<header id="header" class="center">
Hello and welcome to my demo!
</header>

<header id="slider" class="center">
    <img src="http://goo.gl/o6tho"/>
</header>

<div id="content" class="center">
    I want this area to be glued to the footer + 10px space
    And additionally, glued to the element on top of itself + 10px
    The slider can disappear, which should result in the content
    to grow and reach the heaader.
</div>

<footer class="center">
    All rights reserved.
</footer>
​

CSS：

.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;
}
4

3 回答 3

2

不确定css但js你可以尝试这样的事情：

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

正确插入新元素。

于 2012-12-20T14:57:21.067 回答
1

今天做一个纯 CSS 解决方案的唯一方法是%在所有元素上给出高度。

希望在未来的某个时候，我们都能够使用新的 CSS 进行网格布局来完全满足您的需求。

于 2012-12-20T14:58:37.357 回答
-1

这可能对您有用：

创建一个<div>外部主要内容 div 并给它一个position:relative.

于 2012-12-20T08:59:09.140 回答