gpt4 book ai didi

html - 页脚下的内容

转载 作者:行者123 更新时间:2023-11-28 05:21:14 25 4
gpt4 key购买 nike

我无法将页面分成headercontentfooter。我关注了这里关于 stackoverflow 的主题之一。但是,当我尝试向内容部分添加任何内容时,我的所有内容都显示在 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;
}

页面内容显示在页脚下方,即使我将其位置设置为绝对位置也是如此。我究竟做错了什么?感谢您的所有帮助。

最佳答案

你应该添加

<div style="clear:both;"></div>

在您的部分和页脚标记之间,看看是否有帮助

关于html - 页脚下的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39027028/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com