css使用position:absolute之后的元素如何定位

html结构如下:

<body>
    <div id="wrap">
        <div id="header"></div>

        <div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>

        <div id="footer"></div>
    </div>
</body>

<div id="header">使用position: fixed; top: 0; left: 0;
<div id="main">处使用了position: absolute; top: 79px; left: 0;

由于id="main"的高度是由内容来的多少来定的,无法确定整个main div的高度,下面的<div id="footer">不知道如何定位。

请问如何解决?

阅读 11.7k
2 个回答

absolute 值会让 main 这个 div 脱离正常的文档流,那么你的 footer 就会直接无视 main 跳到最上面,请改为 relative。我建议给 main 的高度设一个 min-height,那么 footer 首先会一直位于下方的固定位置,当内容高度超过 min-height 时高度便开始自动适应。
btw,我有篇博文专门对 position 问题进行了总结,不妨一读。:)

《详解 CSS 属性 - position》

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题