Question

底部的空白区域仅显示在iPad（iOS webkit）上，在桌面浏览器上看起来很好。

有解决方法吗？我猜我的CSS有问题，我可能会遗漏一些明显的东西。

http://i62.tinypic.com/2cxcnbt.png

先谢谢，欢呼。

HTML CODE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

<title>TITLE</title>
<link href="style/english.css" rel="stylesheet" type="text/css" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

</head>
<body>

<div id="mainContainer">

    <!--Header-->
    <div id="headerContainer">
        <div id="header"></div>
    <!--Menu-->
    <div id="mainMenuContainer">

    </div>
    <!--Menu-->
    </div>
    <!--Header End-->

    <!--Body-->
    <div id="mainBodyContainer">
        <div id="topExtra"></div>

        <div id="test"></div>
    </div>
    <!--Body End-->

</div>

</body>
</html>

CSS代码：

/* CSS Document */
*{margin:0;paddding:0}

html, body { margin: 0; padding: 0; font-size:12px; min-height: auto; }

#mainContainer { margin:auto; width: 1024px; background-color:#0C9; }

#headerContainer { height: 105px; width: 1024px; position:fixed; z-index:10000; background-color:#265773; }
#header { height: 75px; width: 1024px; background-color:#999; }
#mainMenuContainer { height: 30px; width: 1024px; background-color:#F9C; }

#topExtra { height: 105px; width: 1024px; }
#mainBodyContainer { width: 1024px; }

简单页面显示iPad底部20px的空白区域

0 个答案: