页脚内容
问题描述:
我无法将页面划分为header
,content
和footer
。 我在这里关注了一个关于*的主题。但是,当我尝试向内容部分添加任何内容时,我的所有内容都显示在footer
元素的下方。到目前为止,这是我的代码。页脚内容
任何人都可以解释我做错了什么,背后的原因是什么?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
//Removed
</head>
<body>
<div class="main-wrapper">
<header>
<?php
require('header.php');
?>
</header>
<section class="page-content">
yeah
</section>
<footer>
<?php
include('footer.php');
?>
</footer>
</div>
</body>
</html>
这里是我的CSS
body, html {
width: 100%;
height: 100%;
background: #ddd;
padding: 0;
margin: 0;
}
.main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0;
position: relative;
}
article {
background-color: white;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #555;
height: 55px;
}
.page-content {
width: 100%;
height: 100%;
}
.nav-bar {
width: 100%;
background: white;
text-align: center;
}
的页面内容出现下面的页脚,甚至当我设置它的位置,以绝对的。我究竟做错了什么? 谢谢你的帮助。
答
.page-content {
box-sizing:border-box;
padding:0 0 55px; /* make space for footer */
}
尝试删除'高度:100%;'从页面的内容?它可能试图填充整个页面包装器空间。 – DrSatan1