Question

我需要根据内容高度定位页眉和页脚。因此，即使内容大小发生变化，页眉和页脚也会与内容相邻。我想知道是否存在CSS解决方案（即使是CSS 3），如果没有JS解决方案。

注意：我无法在HTML中更改DIV的顺序。下面是所需布局的图片。

更多细节：

我需要在结束后定位内容的顶部标题的底部。
我需要在结束后定位页脚的顶部内容的底部。
如果标题更改高度，内容应向上/向下移动。
如果内容更改高度，页脚应向上/向下移动。

欢迎举例：）

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script>
    </script>
    <style>
    #content-a, #content-b{
        position: absolute;
        width: 500px;
        height: 250px;
    }
    #content-a {
        background-color: red;
    }
    #content-b {
        background-color: yellow;
    }
    #master {
        position: absolute;
        left: 60px;
        z-index: 100;   
    }
    #header, #footer {
        width: 500px;
        height: 50px;   
    }
    #header {
        background-color: gray;
    }
    #footer {
        background-color: blue;
    }


    </style>

</head>

<body>
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
    <div id="header">header</div>
    <div id="footer">footer</div>
</div>
</body>

</html>

enter image description here

Answer 1

使用你的html结构这对于纯css来说是不可能的，特别是对于页眉和页脚的动态高度 - 因为它们在一个单独的div中，内容div不可能知道多少空间留下来接受。您需要使用j来移动div并计算高度，但我会做以下事情：

body, html {
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}
#master {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#master > div {
    display:table;
    width:100%;
    height:100%;
}
#master > div > div {
    display:table-row;
    width:100%;
}

在jquery的帮助下，重新排序元素：

$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));

Example

Example with expanded content and header

Answer 2

我认为：http://jsfiddle.net/Preben/80a6q40x/1/

我做了什么：由于除标题之外的所有顺序都正确，我们可以这样做：

删除所有位置：绝对; 将margin-top：50px放在内容-a上放位置：ansolute;顶：0像素;在#header上您也可以编辑#content -a以使 min-height： 250px;调整到高度的内容：http://jsfiddle.net/Preben/80a6q40x/4/

就是这样。

<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
    <div id="header">header</div>
    <div id="footer">footer</div>
</div>

CSS：

 #content-a, #content-b{
        width: 500px;
        height: 250px;
    }
    #content-a {
margin-top:50px;
        background-color: red;
    }
    #content-b {
        background-color: yellow;
    }
    #master {

        z-index: 100;   
    }
    #header, #footer {
        width: 500px;
        height: 50px;   
    }
    #header {
        background-color: gray;
    position:absolute;
    top:0px;
    }
    #footer {
        background-color: blue;
    }

enter image description here

如何围绕div“内容”定位两个div“header”和“footer”

2 个答案: