目前,我正在尝试通过指定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>
答案 0 :(得分:0)
你的#body div的高度为500px - 如果内容高于500px则会被切断。
要修复,请移除高度设置,或将其更改为最小高度:500px。