Question

我的div有问题。我正在尝试制作一个内容父潜水，当帖子放在其中时（wordpress主题）将延伸，而不会从底部调整孩子div。我发现关键是让父div绝对，但这给我带来了另一个问题。问题是我还想要一个相对定位的页脚，随着内容div的延伸而移动。所以我想要的是如何同时拥有一个“弹性”内容div和相对定位的页脚？这是我的css：

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}

就像我说的那样，我已经尝试过相对定位，但这并不符合我的喜好。我还尝试了“粘性页脚”方法，它在大分辨率屏幕上工作正常，但在较小的res屏幕上显示在内容div的前面或后面（取决于z-index）。另外，如果它是可行的，我宁愿不使用JS。任何帮助深表感谢！在这里输入代码

Answer 1

在内容中将溢出设置为自动
将内容的高度更改为最小高度
将绝对元素包含在相对div中以获得快乐。

这是一个显示它的jsfiddle：http://jsfiddle.net/mAhet/

HTML

<html>
<body>
    <div id="wrapper">
        <div id="content">
            <div style="position:relative; width:100%; height:100%;">
             <div class="post">lasa sf </div>
             <div class="post"> asd asd as</div>
             <div class="post"> asd a dsadda das</div>
        </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

CSS

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}
#content{

min-height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
overflow:auto;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}

这是一个jsfiddle，显示它在行动：http://jsfiddle.net/mAhet/

儿童div伸出或相对定位父div / footer问题

1 个答案: