我的页脚没有出现在页面的末尾。它出现在中间。我已经尝试了其他人在类似问题上给出的所有其他答案，但效果不佳。
这是我的 html：-
<body>
<div class="nav-container">
</div>
<div class="hero-area">
</div>
<div class="main-container">
<section id="about">
</section>
<section id="services">
</section>
<section id="portfolio">
</section>
<section id="contact">
</section>
</div>
<ul class="social-items">
<li>FACEBOOK</li>
<LI>INSTAGRAM</LI>
<LI>YOUTUBE</LI>
</ul>
<footer>
<h1>This is footer!</h1>
</footer>
</body>
我的页脚出现在投资组合区域内的任何地方。这是我的 sass：-
body {
padding: 0;
margin: 0;
font-family: "Open Sans", sans-serif;
color: $light-mode;
background: $dark-mode;
@include dark-white-transition;
overflow-x: hidden;
min-height: 100%;
position: relative;
}
footer {
background: $dark-mode;
padding: 60px 30px;
color: $light-mode;
box-sizing: border-box;
position: absolute;
bottom: 0;
margin-bottom: 0;
width: 100%;
}
将宽度和高度属性添加到 html 标签可以解决问题。
html {
height:100%;
width:100%;
}
body {
padding: 0;
margin: 0;
font-family: "Open Sans", sans-serif;
color: #f00;
background: #0f0;
overflow-x: hidden;
height: 100%;
position: relative;
}
footer {
background: #00f;
padding: 20px 30px;
color: #0ff;
box-sizing: border-box;
position: absolute;
bottom: 0;
margin-bottom: 0;
width: 100%;
}
ul {
margin:0;
}<body>
<div class="nav-container">
</div>
<div class="hero-area">
</div>
<div class="main-container">
<section id="about">
</section>
<section id="services">
</section>
<section id="portfolio">
</section>
<section id="contact">
</section>
</div>
<ul class="social-items">
<li>FACEBOOK</li>
<LI>INSTAGRAM</LI>
<LI>YOUTUBE</LI>
</ul>
<footer>
<h1>This is footer!</h1>
</footer>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句