Question

我有这两种风格将我的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;
}

所以我所做的就是当内容很小时，他们会继续使用position: absolute，而当内容较长时，他们会留下position: relative。

任何人都知道动态调整内容大小的解决方案吗？

Answer 1

与目前为止的其他答案不同，除了文字之外，我还假设您拥有真实网站所拥有的图片和其他内容。

我建议使用Javascript（因为你有一个jQuery标签）。 PHP最终不知道内容将在浏览器中占用多少空间，因此JS是您的最佳选择。

看看我的示例here。如果删除一些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'); 
}

Div定位在屏幕上

1 个答案: