Div在屏幕上的定位


Div positioning on the screen

我有这两个样式来定位我的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'); 
}