Question

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

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

Here 就是一个例子：

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

Answer 1

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

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

右侧插入新元素。

Answer 2

今天使用仅限CSS的解决方案的唯一方法是在所有元素上提供%高度。

在未来的某个时刻，我们希望能够使用grid layouts的新CSS来完全满足您的需求。

Answer 3

这可能对您有用：

在主要内容div之外创建一个<div>并为其指定position:relative。

CSS：将元素放在页面底部及其上部元素的顶部到底部？

3 个答案: