我有这两个样式来定位我的div在页面的页脚。当您为php生成页面内容时,这些div可以覆盖该内容。
div.panel-foot {
position: absolute;
z-index: 2;
height: 30px;
width: 100%;
bottom: 0;
color: white;
background-color: #333333;
white-space: nowrap;
padding: 5px 100px;
}
div.panel-foot-information {
background-color: rgb(65, 65, 65);
position: absolute;
bottom: 30px;
max-width: none !important;
z-index: 1;
color: white;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
所以我所做的是,当内容很小的时候,它们保持在radapreeie与position: absolute
,当内容较长时,它们保持在position: relative
。
有谁知道动态调整内容大小的解决方案吗?
与目前为止的其他答案不同,我将假设您有图像和其他真正的网站所拥有的东西,除了文本。
我建议使用Javascript(因为你有一个jQuery标签)。PHP最终不知道内容将在浏览器中占用多少空间,因此JS是您的最佳选择。
请看我的例子。如果您删除了一些div内容,您将看到页脚颜色的变化(因为它改变了类名)。你所要做的就是插入你自己的选择器和类名,然后就可以开始了。
// check the size of your conent div
// assuming it's got an id of "content"
contentHeight = $("#content").height();
// set the threshold that will determine how big is too big
threshold = 300;
// or if you want to make the threshold as big as the window...
// threshold = $(window).height();
// if the content height is greater than the threshold..
if(contentHeight > threshold){
// remove one class and add another
$("#footer").removeClass('green');
$("#footer").addClass('red');
}
// otherwise, do the opposite
else{
$("#footer").removeClass('red');
$("#footer").addClass('green');
}