如何解决如何解决页脚与正文内容重叠的问题?
我的页脚与我的内容重叠(并非总是如此,我已经创建了几个以 flex/grid 为主题的 HTML 并且它们工作正常,页脚被推到它应该的位置,并且在调整页面大小时,页脚仍然可以识别内容并走得更远下)。
页脚是响应式的,宽度/高度随着浏览器窗口大小的调整而变化,因此页脚的 .px 值不起作用,我希望它没有必要。
这是代码,我将在此内容的底部包含 JSFiddle。我在 Stack Overflow 上尝试了一些问答,但似乎没有任何效果。
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<base target="_blank"/>
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Template</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- Navigation Bar -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">MALLORCA<span>NOW</span></label>
<ul>
<li><a class="active"href="Index.html">Home</a></li>
<li><a href="Holiday-Rentals.html">Holiday Rentals</a></li>
<li><a href="#">Properties For Sale</a></li>
</ul>
</nav>
<!-- End Navigation Bar -->
<!-- Main Content -->
<!-- InstanceBeginEditable name="main-content" -->
<div class="main-content">
<div class="a-body">
<div class="a-box">
<span style="--i:1"><img src="Images/Slideshow/1.png"></span>
<span style="--i:2"><img src="Images/Slideshow/2.png"></span>
<span style="--i:3"><img src="Images/Slideshow/3.png"></span>
<span style="--i:4"><img src="Images/Slideshow/4.png"></span>
<span style="--i:5"><img src="Images/Slideshow/5.png"></span>
<span style="--i:6"><img src="Images/Slideshow/1.png"></span>
<span style="--i:7"><img src="Images/Slideshow/2.png"></span>
<span style="--i:8"><img src="Images/Slideshow/3.png"></span>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="footer-main-content">
<div class="left box">
<h2>About Us</h2>
<div class="footer-content">
<p>Mallorca Now,established in 2010,specialise in Property Rentals,Sales and Management in the North East area of Mallorca,covering mainly Cala Ratjada,Cala Bona,Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
<div class="social">
<a href="https://www.facebook.com/MallorcaNowInformationGuide/"><span class="fab fa-facebook-f"></span></a>
<a href="https://twitter.com/mallorcanow1"><span class="fab fa-twitter"></span></a>
<a href="https://www.instagram.com/mallorcanow/"><span class="fab fa-instagram"></span></a>
<a href="#"><span class="fab fa-youtube"></span></a>
</div>
</div>
</div>
<div class="center box">
<h2>Address</h2>
<div class="footer-content">
<div class="place">
<a href="https://goo.gl/maps/48EoKioLLJPXgBjD6"><span class="fas fa-map-marker-alt"></span></a>
<span class="text">Cala Bona,Mallorca</span>
</div>
<div class="phone">
<a href="tel:34676841886"><span class="fas fa-phone-alt"></span></a>
<span class="text">+34-676841886</span>
</div>
<div class="email">
<a href="mailto:office@mallorca-now.com?subject=How can we help you?&body=Give us some more information..."><span class="fas fa-envelope"></span></a>
<span class="text">office@mallorca-now.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact Us</h2>
<div class="footer-content">
<form action="#">
<div class="email">
<div class="text">Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message *</div>
<textarea rows="2" cols="25" required></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">Est. 2012 -<a href="#"> Mallorca-Now</a></span>
<span class="far fa-copyright"></span><span> - All Rights Reserved</span>
</center>
</div>
</footer>
<!-- End Footer -->
</body>
<!-- InstanceEnd --></html>
CSS(最后一个 css 样式是特别应用于此 HTML 的样式):
@charset "utf-8";
/* CSS Document */
/* font-family: 'Montserrat',sans-serif; */
/*---------------------------------------- Page-Wide Styles ----------------------------------------*/
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family: 'Montserrat',sans-serif;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline:; 1px solid slategrey;
border-radius:80px;
}
/*---------------------------------------- Navbar ----------------------------------------*/
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
z-index:1;
top:0;
overflow:hidden;
}
label.logo{
color:white;
font-size:35px;
font-weight:100;
line-height:80px;
padding:0 100px;
}
label.logo span{
font-weight:900;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin:0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
}
nav ul li a.active,nav ul li a:hover{
background:#6DD5FA;
transition:0.9s;
border-radius:4px;
}
.checkbtn{
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}
#check{
display:none;
}
@media (max-width: 952px){
label.logo{
font-size:30px;
padding-left:50px;
}
nav ul li a{
font-size:16px;
}
}
@media (max-width: 489px){
label.logo{
font-size:25px;
padding:0px 0px 0px 10px;
}
.checkbtn{
font-size:25px;
margin-right:20px;
}
nav ul li a{
font-size:0px;
}
}
@media (max-width:1000px){
.checkbtn{
display:block;
}
ul{
position:fixed;
width:100%;
height:100vh;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right,#2980B9,#6DD5FA,#FFFFFF);
top:80px;
left:-100%;
text-align:center;
transition:all .9s;
}
nav ul li{
display:block;
margin:50px;
line-height:30px;
}
nav ul li a{
font-size:20px;
}
a:hover,a.active{
background:none;
color:#0082e6;
}
#check:checked ~ ul{
left:0;
}
}
/*---------------------------------------- Footer ----------------------------------------*/
footer{
position:relative;
bottom:0;
width:100%;
background-color:#101010;
color:white;
}
.footer-main-content{
display:flex;
}
.footer-main-content .box{
flex-basis:50%;
padding:10px 20px;
}
.box h2{
font-size:1.125rem;
font-weight:600;
text-transform:uppercase;
}
.box .footer-content{
margin:20px 0 0 0;
position:relative;
}
.box .footer-content:before{
position:absolute;
content:'';
top:-10px;
height:2px;
width:100%;
background:#1a1a1a;
}
.box .footer-content:after{
position:absolute;
content:'';
height:2px;
width:15%;
background:#6DD5FA;
top:-10px;
}
.left .footer-content{
text-align:justify;
}
.left .footer-content .social{
margin:20px 0 0 0;
}
.left .footer-content .social a{
padding: 0 2px;
}
.left .footer-content .social a span{
height:40px;
width:40px;
background:#1a1a1a;
line-height:40px;
text-align:center;
font-size:18px;
border-radius:5px;
color:white;
}
.left .footer-content .social a span:hover{
background:#6DD5FA;
transition:0.9s;
}
.center .footer-content .fas{
font-size:1.4375rem;
background:#1a1a1a;
height:45px;
width:45px;
line-height:45px;
text-align:center;
border-radius:50%;
transition:0.9s;
cursor:pointer;
}
.center .footer-content a span{
color:white;
}
.center .footer-content .fas:hover{
background:#6DD5FA;
}
.center .footer-content .text{
font-size:1.0625rem;
font-weight:500;
padding-left:10px;
}
.center .footer-content .phone{
margin:10px 0;
}
.right form .text{
font-size:1.0625rem;
margin-bottom:2px;
color:#656565;
}
.right form .msg{
margin-top:10px;
}
.right form input,.right form textarea{
width:100%;
font-size:1.0625rem;
background:#151515;
padding-left:10px;
border:1px solid #222222;
color:white;
}
.right form input:focus,.right form textarea:focus{
outline-color:#3498db;
}
.right form input{
height:32px;
}
.right form .btn{
margin-top:10px;
}
.right form .btn button{
height:40px;
width:100%;
border:none;
outline:none;
background: #6DD5FA;
font-size:1.0625rem;
font-weight:500;
cursor:pointer;
transition:0.3s;
color:white;
}
.right form .btn button:hover{
background:#000;
}
.bottom center{
padding:5px;
font-size:0.9375rem;
background:#151515;
}
.bottom center span{
color:#656565;
}
.bottom center span a{
color:white;
}
@media screen and (max-width:900px){
footer{
position:relative;
bottom:0px;
}
.footer-main-content{
flex-wrap:wrap;
flex-direction:column;
}
.footer-main-content .box{
margin:5px 0;
}
}
/*---------------------------------------- Main Content ----------------------------------------*/
.main-content{
min-height:;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right,#FFFFFF);
}
/*---------------------------------------- Rantaltest Styles ----------------------------------------*/
.a-body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.a-box{
position:relative;
width:200px;
height:200px;
}
和 JSFiddle https://jsfiddle.net/f46vzgwj/
正如您在 JSFiddle 中看到的,页脚开始与内容重叠,然后完成其框,您可以看到页脚之后的最后一个内容。
解决方法
设置height: auto
.a-box{
position:relative;
width:200px;
height:auto; /* this was 200px */
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。