1

我的 div 有问题。我正在尝试制作一个内容父级潜水，当帖子被放置在其中时（wordpress 主题），它不会从底部突出显示子级。我发现这样做的关键是让父 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。任何帮助深表感谢！在此处输入代码

4

1 回答 1

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/

于 2012-09-08T07:10:28.503 回答