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 に答える