目前，我正在尝试通过指定 width:100% 和 float:left 来修复与我的内容重叠的页脚，这样它就可以了在我的内容下面。
但是，在我的 iPhone 上，页脚仍然与我的内容重叠……我不明白为什么。我已经删除了缓存/等......但它仍然重叠。 CSS 适用于另一个页面，但不适用于此页面。
CSS:
html {
background: #000;
}
body {
margin: 0;
padding-left: 40px;
padding-top: 25px;
}
#container {
min-width: 900px;
overflow: hidden;
}
#header {
}
.logo {
font-family: Didot;
font-size: 4.5em;
color: #FFF;
letter-spacing: 4px;
}
.main_nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
float: left;
}
.main_nav li {
margin: 5px;
}
.main_nav li a {
color: #FFF;
text-decoration: none;
font-size: 32px;
font-family: Garamond;
font-variant: small-caps;
}
.main_nav li a:hover {
color: #06F;
}
#body {
padding-bottom: 100px;
float: left;
background-color: rgba(0,0,0,0.7);
width: 750px;
height: 500px;
}
#footer {
width: 100%;
height: 100px;
float: left;
}
.footer_text {
font-family: Garamond;
font-size: 12px;
color: #FFF;
}
HTML:
<head>
<link href="services.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ieservices.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"></div>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
最佳答案
您的#body div 的高度为 500 像素 - 如果内容高于 500 像素，则会被截断。
要解决此问题，请删除高度设置，或将其更改为 min-height:500px。
关于iphone - float : Left Not Working on iPhone，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16268945/