日期:2014-05-17  浏览次数:20916 次

一个非常奇特且有趣的问题
要在手机上实现一个DIV底部居中的效果,以下是实现代码


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Wap</title>
<base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> 
  

<body style="background-color: #1863C7;">

<div>
<table  style="margin-bottom:50px;background-color: #1863C7;height: 100%;width: 100%">

  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
  <tr><td >很多内容</td></tr>
</table>


 <style type="text/css">
.shape{
width: 100%;  
height: 50px; 
position:fixed!important; 
position:absolute;
bottom:0px!important; 
bottom:auto; 
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight - this.clientHeight):document.body.scrollTop+(document.body.clientHeight - this.clientHeight));
}
</style>
<div id="top"  class="shape" >
<table   style="background: yellow;width: 100%;height:79px;border: 0;"    cellpadding="0" cellspacing="0">
      <tr>
        <td style="width: 25%;height: 49px;text-align: center;vertical-align: top"><a href="javascript:void(0)"  onclick="javascript:alert('主页')" style="font-size: 10">主页</a></td>
        <td style="text-align: center;vertica