Question

我在桌面计算机上使用以下方法创建一个似乎正常工作的网站，但是当我在iPad上测试并且内容扩展到页脚时，页脚不会被推送向下，但重叠内容。

我的HTML是：

<body>
 <div id="wrapper">

  <div id="header">
   ....
  </div>

  <div id="main">   
    <div id="mainuser">                       
      <span id="left"><jdoc:include type="component" /></span>
      <span id="right"><jdoc:include type="modules" name="position-7" style="xhtml" />                               
      </span>
    </div>
  </div>

  <div id="ft">
   ...
  </div>

 </div>
</body>

这里是CSS：

html {     
 height: 100%; 
 padding:0;
 margin:0;   
} 

body{   
 height:100%;   
 margin:0;     
 padding:0;      
 text-align:left;     
}   

#wrapper {
 min-height: 100%;
 position:relative;  
}

#main{    
 width:700px;  
 background:transparent;  
}

#mainuser {    
 margin-top:40px;  
 width:700px;
 text-align:left;
 background:#fff;
}  

#left {
 float:left;
 width: 540px;   
}

#right {
 float:right;
 width:150px;
 text-align:left;
 background:transparent;
 color: #e10000;
 margin-right:5px;
 margin-top:5px;   
}

#ft {
 width:100%;
 height:60px; 
 border-top:1px solid #527988; 
 position:absolute;
 left:0;
 bottom:0;     
}

我还尝试在内容和页脚之间插入一个明确的div：两者，但它没有用。

页脚重叠内容DIV（在iPad上）

0 个答案: