html – 位置绝对的div内的页眉,内容和页脚

2023年6月14日 229次阅读

我有一个绝对位置的div元素.位置值很重要,无法更改.如何在div中设置标题,内容和页脚？

页眉和页脚的高度是固定的,内容应占用剩余的所有空间.标题始终位于顶部和页脚底部也很重要.

父元素也应该可以使用南可调整大小的句柄来调整大小,内容应该根据父元素的高度来改变其高度.

.content {
    height: ?; /* What should this be?? */
}

情况的一个例子：http://jsfiddle.net/7gPzF/26/

最佳答案

DEMO

一种方法是使中间内容位置绝对,并在其中移动页眉和页脚.然后使用填充来抵消头部和脚部空间.

HTML

<div class="wrap" id="wrap">
    <div class="content">
        <div class="header">header</div>
        text text text text text
        <div class="footer">footer</div>   
    </div>     
</div>

CSS

.wrap {
    width: 100px;
    border: 1px solid black;
    position: absolute;
}

.header {
    position:absolute;
    height: auto;
    width:100%;
    top: 0;
    border: 1px solid green;
}

.footer {
    position:absolute;
    width:100%;
    height: auto;
    border: 1px solid green;
    bottom: 0;
}

.content {
    height: 100%; /* What should this be?? */
    border: 1px solid green;
    position:relative;
    top:0;
    padding:20px 0;/* padding height of header/footer */
    box-sizing:border-box;
}
点赞