Question

我正在尝试制作一个包含3个元素的页面：页眉，页脚和内容。顾名思义，我希望标题贴在顶部，页脚在底部，以及介于两者之间的内容。我已经做了一个布局，将页眉和页脚放在它们应该的位置，但内容要么重叠，要么相反，内容应该变小。

我的问题是页眉和页脚将被用于许多不同的东西，因此它们在高度方面是动态的。

有没有办法让内容填充页眉和页脚之间的空格，而不重叠任何空格？

如果可能，我更喜欢纯CSS，但如果不可能，我也想要一个JavaScript建议。：）

谢谢！

编辑：这就是我的主题。

<div class="container">
    <div id="header"></div>
    <div id="footer"></div>
    <div id="content"></div>
</div>

CSS：

#content {
    position:absolute;
    background: url('img/textures/fabric.png');
    background-color: gray;
    height:auto;
    width:auto;
    margin:0 auto 0 48px; /* Center content */
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;  
}

#dashtop {
    position:fixed;
    width:auto;
    background-color:aqua;
    opacity: .5;
    margin-left: 48px;
    top:0;
    left:0;
    right:0;
    text-align:center;
}

#footer {
    position: fixed;
    margin-left: 48px;
    background-color:green;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    height:auto;
    text-align:center;
    opacity:0.5;
    z-index:0;

}

Answer 1

对标题和内容使用相对定位（无位置属性），并对页脚使用固定定位。

根据页眉和页脚高度更改高度的动态内容

1 个答案: