Question

尝试使用绝对位置创建子div，以扩展包含位置相对的父div。

<html>
<head>
    <title>Stay in parent</title>
</head>
<body>
    <div style="position:relative">
        <div>
            header
        </div>
        <div style="position:absolute;">
            content<br />
            content<br />
            content<br />
        </div>
    </div>
    <div id="footer" style="clear:both">
        footer
    </div>
</body>
</html>

页脚只停留在内容上。

Answer 1

尝试下面的代码，可以帮助您理解结构。

<html>
<head>
    <title>Stay in parent</title>
</head>
<body>
    <div style="width:100%; height:90%; border:#999999 1px solid; padding:2px;">
        <div style="width:99%; border:#3399FF 1px solid;padding:2px;">
            header
        </div>
        <div style="width:99%; float:left; border:#3399FF 1px solid;padding:2px; ">
            content<br />
            content<br />
            content<br />
        </div>
    </div>
    <br clear="all" />
    <div id="footer" style="width:100%;border:#999999 1px solid;padding:2px;">
        footer
    </div>
</body>
</html>

绝对的孩子div留在父母

1 个答案: