javascript - 仅在移动横向模式下页脚重叠网页，底部内容/div 从底部切割

Question

仅在移动横向 View 中，页脚与我的网页重叠。此外，<div> 的底部内容来不及了。请指导。我附上了屏幕截图。

页脚的 CSS 文件

#footer {   
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: absolute;
    left: 0px;
    bottom: 2px;
    text-align: center;
}

我也添加了我的 JS 代码以获取更多信息。 请指导如何防止重叠。 JS代码

function getScereenWidthHeight()
{
var isAndroidApp = $('#isAndroidApp').val();
if(isAndroidApp == 'true')
{
    var screenWidth = 0;
    var screenHeight = 0;   
    var dpi = 0;
    var screenWidthInches = 0;
    var screenHeightInches = 0;
    var thresholdScreenSize = 7;


    //Get device DPI

    dpi = document.getElementById("dpi").offsetHeight;

    //get screen height and screen width in pixels

    screenWidth = screen.width;

    screenHeight = screen.height;

    //convert screen height and width in inches, formula: Pixels ÷ DPI = Inches 

    screenWidthInches = Math.round(screenWidth/dpi);

    screenHeightInches = Math.round(screenHeight/dpi);

    if(screenWidthInches > thresholdScreenSize || screenHeightInches > thresholdScreenSize)
    {
        document.getElementById("centeredDiv").style.display = "inline";
        document.getElementById("footer").style.display = "inline"; 
    }    
    else
    {
        if(document.getElementById("androidErrorTxt") != null && document.getElementById("androidErrorTxt") != 'undefined')
        {
            document.getElementById("androidErrorTxt").style.display = "inline";
            document.getElementById("footer").style.display = "inline";
        }               
    }
}
else
{
    document.getElementById("centeredDiv").style.display = "inline";
    document.getElementById("footer").style.display = "inline"; 
}
}


function getFooter(  )
{

 var myDiv9= "<p>" + eTextIpadCopyrightMsg ;
    myDiv9 += "<a href=\"" + eTextIpadLegalUrl + "\" class=\"footermenulink\">" + eTextIpadLegalUrlText + "</a> |   " ;
    myDiv9 += "<a href=\"" + eTextIpadPrivacyUrl + "\" class=\"footermenulink\">" + eTextIpadPrivacyUrlText + "</a> |   " ;
    myDiv9 += "<a href=\"" + eTextIpadPermissionsUrl + "\" class=\"footermenulink\">" + eTextIpadPermissionsUrlText + "</a> |   " ;
    myDiv9 += "<a href=\"" + eTextIpadSupportUrl + "\" class=\"footermenulink\">" + eTextIpadSupportUrlText + "</a>" ;
    myDiv9 += "</p>" ;
    $("#footer").append(myDiv9);

}

Answer 1

尝试以下操作

      <div class="clear"></div>

      <div id=footer>
       ....
       ....
      </div> 

     #footer
     {
      width:100%;
      text-align: center;
     }

     .clear
     {
      clear: both;
     }