如何解决CSS：内容重叠页脚
我的内容（应该是）包含在我的主要标签下，但是我的内容的一部分出现在（检查元素-see image）中，而不是主要的一部分，所以我相信这就是为什么重叠在我的页脚上。
我已经仔细检查了一下我的内容是否有问题，事实证明这是因为 我注释掉了我的主要内容（用HTML和CSS），并写了一个新内容（仅用html），它与页脚不重叠。 主要问题是此部分（显示在inspect元素-see image中）附加到两列（手风琴和一列）上，这两列又放置在我的主要标签下并且与我的页脚不重叠，所以为什么这些列中只有这部分不包含在我的主要标签中。
请帮助我解决这个问题，我也是一个初学者，所以我可能在这里缺少一些简单的东西。 参见下面的代码。
提前谢谢
这是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<meta name= "description" content= "this this a website that ">
<meta name="viewport" content= "width=device-width,initial-scale=1">
<meta name= "keywords" content= "law,african,regulation">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link href= "" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Algeria.css">
<title> Algeria </title>
<link rel="apple-touch-icon" sizes="57x57" href="icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<a href="index.html"><img src="logo4.bmp" ></a>
<nav>
<ul>
<ol><a href="About.html">About</a></ol>
<div class="line"></div>
<ol><a href="Contact.html">Contact</a></ol>
</ul>
</nav>
</header>
<main>
<div class= "index-banner">
<h1> Algeria </h1>
</div>
<div class="wrapper">
<div class= "Vline">
<section class= "box1">Country profile
<div class="lines"></div>
<h2>Capital city : Algiers (Alger)</h2>
<h3>Currency : Algerian Dinar (DZN)</h3>
<h4>Country calling code : +213</h4>
<h5>Official languages : Arabic,Berber</h5>
</section>
</div>
<div class="box2">
<button class="accordion">Banking & finance Law </button>
<div class="panel">
<ul>
<li>
<a href= "C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Loi 90-10 relative à la monnaie et au crédit.pdf" type= "application/pdf" target="_blank">Loi n°90-10 relative à la monnaie et au crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Loi N° 17-10 du 11 octobre 2017 complétant l’ordonnance N° 03-11 du 26 aout 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Loi n° 17-10 du 11 octobre 2017 complétant l’ordonnance N° 03-11 du 26 aout 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Règlement N°2012-03 du 28 Novembre 2012 relative à la lutte contre le blanchiment des capitaux et le financement du terrorisme.pdf" type= "application/pdf" target="_blank">Règlement n°2012-03 du 28 Novembre 2012 relative à la lutte contre le blanchiment des capitaux et le financement du terrorisme</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Règlement n° 20-04 relative aux conditions bancaires applicables aux opérations de change.pdf" type= "application/pdf" target="_blank">Règlement n° 20-04 relative aux conditions bancaires applicables aux opérations de change</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Ordonnance N° 03-11 DU 26 août 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Ordonnance n° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Ordonnance N° 10-04 du 26 août 2010 modifiant et complétant l’ordonnance N° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit.pdf" type= "application/pdf" target="_blank">Ordonnance n° 10-04 du 26 août 2010 modifiant et complétant l’ordonnance n° 03-11 du 26 août 2003 relative à la Monnaie et au Crédit</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Instruction N°08-96 du 18 Décembre 1996 relative aux conditions de création et d'agrèment des bureaux de change.pdf" type= "application/pdf" target="_blank">Instruction n°08-96 du 18 Décembre 1996 relative aux conditions de création et d'agrèment des bureaux de change</a></li>
<li>
<a href="C:\xampp\htdocs\rootfolder\Algeria\banking and finance law\Instruction N°02-2007 du 31 Mai 2007 Relative aux Opérations Liées aux transactions courantes avec l'étranger.pdf" type= "application/pdf" target="_blank">Instruction n°02-2007 du 31 Mai 2007 Relative aux Opérations Liées aux transactions courantes avec l'étranger</a></li>
</ul>
</div>
<button class="accordion">Commercial Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Code du commerce.pdf" type="application/pdf" target="_blank" >Code du commerce</a></li>
<li> <a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\القانون التجـاري.pdf"type="application/pdf" target="_blank">القانون التجـاري</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 90-22 relative au registre de commerce.pdf" type="application/pdf" target="_blank">Loi n° 90-22 relative au registre de commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 2004-02 relative aux règles applicable aux pratiques commerciales.pdf" type="application/pdf" target="_blank" >Loi n° 2004-02 relative aux règles applicable aux pratiques commerciales</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n° 2004-08 relative aux conditions d'exercice activites commerciales.pdf" type="application/pdf" target="_blank" >Loi n° 2004-08 relative aux conditions d'exercice activites commerciales</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Loi n°2018-05 relative au commerce electronique.pdf" type="application/pdf" target="_blank" >Loi n°2018-05 relative au commerce electronique</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Décret-2019-89 relatif aux modalités de conservation et de transmission des registres des transactions commerciales électroniques au centre national du registre de commerce.pdf" type="application/pdf" target="_blank" >Décret-2019-89 relatif aux modalités de conservation et de transmission des registres des transactions commerciales électroniques au centre national du registre de commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Comercial law\Ordonnance n 96-07 modifiant et complétant la loi n 90-22 relative au registre de commerce.pdf" type="application/pdf" target="_blank" >Ordonnance n 96-07 modifiant et complétant la loi n 90-22 relative au registre de commerce</a></li>
</ul>
</div>
<button class="accordion">Civil Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\Code civil.pdf"type="application/pdf" target="_blank" >Code civil</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\القانون الـمدنـي.pdf"type="application/pdf" target="_blank" >Code du commerce</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\Code de procédure civile et administrative.pdf"type="application/pdf" target="_blank" >Code de procédure civile et administrative</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\civil law\قانون الإجراء ات المدنية والإدارية.pdf"type="application/pdf" target="_blank" >قانون الإجراء ات المدنية والإدارية</a></li>
</ul>
</div>
<button class="accordion">Competition Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Competition law\Décret du 2005 relatif aux autorisations des opérations de concentration.pdf"type="application/pdf" target="_blank" >Décret du 2005 relatif aux autorisations des opérations de concentration</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Competition law\Ordonnance nº03‐03 du 19 juillet 2003 relative à la concurrence.pdf" type="application/pdf" target="_blank" >Ordonnance nº03‐03 du 19 juillet 2003 relative à la concurrencee</a></li>
</ul>
</div>
<button class="accordion">Consumer Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Consumer Law\Dècret exècutif n° 13-378 relative à l'information du consommateur.pdf"type="application/pdf" target="_blank" >Dècret exècutif n° 13-378 relative à l'information du consommateur</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Consumer Law\Loi n° 09-03 du 29 Safar 1430 relative à la protection du consommateur et la répression des fraudes.pdf"type="application/pdf" target="_blank" >Loi n° 09-03 du 29 Safar 1430 relative à la protection du consommateur et la répression des fraudes</a></li>
</ul>
</div>
<button class="accordion">Criminal Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\Code pénal.pdf"type="application/pdf" target="_blank" >Code pénal</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\قانون العقوبـات.pdf"type="application/pdf" target="_blank" >قانون العقوبـات</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\Code de procédure pénale.pdf"type="application/pdf" target="_blank" >Code de procédure pénale</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\criminal law\قانون الإجراءات الجزائيـة.pdf"type="application/pdf" target="_blank" >قانون الإجراءات الجزائيـة</a></li>
</ul>
</div>
<button class="accordion">Employment Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Employment law\Code du travail.pdf"type="application/pdf" target="_blank" >Code du travail</a></li>
</ul>
</div>
<button class="accordion">Family Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Family law\Code famille.pdf"type="application/pdf" target="_blank" >Code famille</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Family law\قانون الأسـرة.pdf"type="application/pdf" target="_blank" >قانون الأسـرة</a></li>
</ul>
</div>
<button class="accordion">Intellectual property Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-18 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-06 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux marques.pdf"type="application/pdf" target="_blank" >Loi n° 03-18 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-06 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux marques
</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-18 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموالفقة على الأمر رقم 03-06 المؤرخ في جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بالعلامات.pdf"type="application/pdf" target="_blank" >القانون رقم 03-18 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموالفقة على الأمر رقم 03-06 المؤرخ في جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بالعلامات
</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-19 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-07 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux bre.pdf"type="application/pdf" target="_blank" >Loi n° 03-19 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-07 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux brevets d'invention</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-19 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموافقة على الأمر رقم 03-07 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق ببراءات الاختراع.pdf"type="application/pdf" target="_blank" >القانون رقم 03-19 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموافقة على الأمر رقم 03-07 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق ببراءات الاختراع
l</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\Loi n° 03-17 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-05 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux dro.pdf"type="application/pdf" target="_blank" >Loi n° 03-17 du 9 Ramadhan 1424 correspondant au 4 novembre 2003 portant approbation de l'ordonnance n° 03-05 du 19 Joumada El Oula 1424 correspondant au 19 juillet 2003 relative aux droits d'auteur et aux droits voisins</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Intellectual property law\القانون رقم 03-17 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموافقة على الأمر رقم 03-05 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بحقوق المؤل.pdf"type="application/pdf" target="_blank" >القانون رقم 03-17 مؤرخ في 9 رمضان عام 1424 الموافق 4 نوفمبر عام 2003,يتضمن الموافقة على الأمر رقم 03-05 المؤرخ في 19 جمادى الأولى عام 1424 الموافق 19 يوليو عام 2003 والمتعلق بحقوق المؤل</a></li>
</ul>
</div>
<button class="accordion">Privacy Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Privacy Law\Loi n° 18-07 du 10 juin 2018 relative à la protection des personnes physiques dans le traitement des données à caractère personnel.pdf" type="application/pdf" target="_blank" >Loi n° 18-07 du 10 juin 2018 relative à la protection des personnes physiques dans le traitement des données à caractère personnel</a></li>
</ul>
</div>
<button class="accordion">Tax Law </button>
<div class="panel">
<ul>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Loi de finance 2020.pdf"type="application/pdf" target="_blank" >Loi de finance 2020</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code des Impôts Directs et Taxes Assimilés.pdf"type="application/pdf" target="_blank" >Code des Impôts Directs et Taxes Assimilés</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code des Impots Indirects.pdf"type="application/pdf" target="_blank" >Code des Impots Indirects</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code de l'Enregistrement.pdf"type="application/pdf" target="_blank" >Code de l'Enregistrement</a></li>
<li><a href="C:\xampp\htdocs\rootfolder\Algeria\Tax Law\Code Procédures Fiscales.pdf"type="application/pdf" target="_blank" >Code Procédures Fiscales</a></li>
</ul>
</div>
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</script>
</div>
</div>
</main>
<footer>
Copyright © <script>document.write(new Date().getFullYear());</script>,Africa Law. All rights reserved. Terms of Use
</footer>
</body>
</html>
这是我的CSS代码
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
html,body {
height: 100%!important;
}
main {
min-height: calc(100vh - 120px - 40px);
}
body {
line-height:1;
}
article,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title],dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input,select {
vertical-align:middle;
}
/* MY CODE*/
*{
text-decoration: none;
}
body {
background-color: white;
}
header {
background-color:white ;
width: 100% ;
height: 120px;
}
img {
position: absolute;
bottom: 512px;
margin-left:60px;
}
header nav ul {
position: absolute;
bottom: 510px;
right: 200px;
text-transform: uppercase;
display: block;
margin: 0 auto;
width: fit-content;
color: rgb(230,227,227);
}
header nav ul ol {
font-family: Playfair display ;
font-size: 20px;
color: #111;
display: inline-block;
list-style: none;
padding: 0 16px;
}
.line {
border-left : 2px solid silver;
height: 20px;
position: absolute;
left: 44%;
margin-left: -1px;
top: 0;
}
.lines {
border-bottom : 3px solid #C3AB73;
height: 10px;
width: 110px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
margin-top: 10px;
}
header nav ul ol a {
font-family: Playfair display;
font-size: 20px;
color: #111;
}
header .languages {
display: none;
}
/*INDEX*/
.index-banner {
overflow: auto;
position: relative;
}
.index-banner {
width: 100%;
height: 50vh;
background-image: url('coverpage.jpg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: table;
}
.index-banner h1 {
font-family: Playfair display;
font-size: 35px;
font-weight: 300;
color: white;
position: absolute;
padding-top: 150px;
left: 580px;
/*text-shadow: 0px 0px 4px white;*/
}
/* Styling Country*/
/*.container {
display: flex;
justify-content: space-around;
flex-direction: row;
height: 700px;
background: rgba(214,221,229,1) ;
width: 100%;
}*/
.wrapper{
margin: 0;
display: flex;
flex-direction:row;
height: 100%;
}
.Vline {
height: 670px;
width: 300px;
margin: -15px;
background-color: rgba(214,1) ;
overflow: hidden;
}
.box1 {
border-radius: 5px;
margin: 0 auto;
margin-top: 15px;
margin-left: 10px;
padding: 12px;
border: 10px black;
width: 77%;
height: 18%;
/*background-color:#7d93b0;*/
font-family: Arial;
font-size: 14px;
font-weight: bold;
}
h2,h6 {
border-radius: 1px;
margin: 1px;
margin-bottom: 0px;
padding: 3px;
font-family: Arial;
color: black;
background-color: whitesmoke;
}
h2:hover,h3:hover,h4:hover,h5:hover,h6:hover {
background-color:#C3AB73;
transition: 0.4s;
box-shadow:0 0 2rem 0 rgb(246,233,185);
cursor: pointer;
}
h2 {
margin-top: 9px;
}
/* Accordion*/
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: rgb(243,243,243);
color: #C3AB73 ;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid white;
outline: none;
transition: 0.4s;
font: 18px Lato,arial;
font-weight: bold;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS),and when you move the mouse over it (hover) */
.active,.accordion:hover {
background-color: #50422E;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: "\2B9B";
font-size: 18px;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2B99";
}
.box2 {
position: center;
bottom: 80px;
right:80px;
height: 70px;
width: 70%;
line-height: 50px;
margin:0 auto;
}
li {
list-style: none;
}
li:before {
content: "■";
padding-right: 13px;
color: #C3AB73;
}
a {
color: #38485c;
}
footer {
padding: 12px;
background-color: #50422E;
color: white;
text-align: center;
}
解决方法
首先，与您的问题无关，HTML文档底部还有一个额外的</script>：
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</script> <!--<<< DELETE THIS GUY -->
据我所知，您看到的怪异重叠与在.box2上设置的height属性有关。您将height设置为70px，但其中的内容远远超过了该高度。如果删除该属性，则高度将响应其中的内容。此外，您将position设置为center，这是一个无效参数。请参考以下准则：https://www.w3schools.com/cssref/pr_class_position.asp
我建议尝试相对定位，以查看它是否适合您的需求。我将从我的JSFiddle示例中删除它，但是如果需要，您可以将其重新添加。
.box2 {
position: center; //<<< CHANGE TO position: relative OR DELETE
bottom: 80px; //<<< THIS PROPERTY DOESN'T WORK BECAUSE position IS INVALID
right:80px; //<<< THIS PROPERTY DOESN'T WORK BECAUSE position IS INVALID
height: 70px; //<<<DELETE ME
width: 70%;
line-height: 50px;
margin:0 auto;
}
最后，我建议将页脚文本包装在<p>或<span>标签中，然后给<footer>增高一些。目前已被压缩，我认为这是导致您遇到问题的原因。
这是我建议的更改的JSFiddle：https://jsfiddle.net/2513cg6z/
让我知道是否需要进一步说明。
,请仅包含重现该问题所需的相关代码。 我分析了您的代码，发现以下内容：
<header>
</header>
<main>
<div class="index-banner"></div>
<div class="wrapper"></div>
</main>
<footer>
</footer>
我看到包装类中的元素正在溢出，所以我添加了：
.wrapper {
overflow: auto;
}
也是您的页脚类：
footer {
position: relative;
}
另一方面，我看到了这样的清单：
<li><a href="#"type="application/pdf" target="_blank" ></a></li>
请注意，href属性旁边是“类型”，应始终将其分隔：
<li><a href="#" type="application/pdf" target="_blank" ></a></li>
并检查您的脚本标签，还有一个额外的结束脚本标签：
<script type="text/javascript">
</script>
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
