CSS：内容重叠页脚
CSS: Content overlapping footer
我的内容（应该是）包含在我的 Main 标签下，但是我的一部分内容出现在（inspect elements-see image）中，而不是 Main 的一部分，我相信这就是原因该部分与我的页脚重叠。
我仔细检查了我的内容是否有问题，结果是因为什么时候
我注释掉了我的主要内容（在 HTML 和 CSS 中）并写了一个新内容（就在 html 中）它没有与我的页脚重叠。
主要问题是这个部分（出现在检查元素中 - 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,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,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,221,229,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,h3,h4,h5,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: "B9B";
font-size: 18px;
float: right;
margin-left: 5px;
}
.active:after {
content: "B99";
}
.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 设置为 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>
我看到包装器 class 中的元素溢出了，所以我添加了：
.wrapper {
overflow: auto;
}
还有你的页脚class:
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>
我的内容（应该是）包含在我的 Main 标签下，但是我的一部分内容出现在（inspect elements-see image）中，而不是 Main 的一部分，我相信这就是原因该部分与我的页脚重叠。
我仔细检查了我的内容是否有问题，结果是因为什么时候 我注释掉了我的主要内容（在 HTML 和 CSS 中）并写了一个新内容（就在 html 中）它没有与我的页脚重叠。 主要问题是这个部分（出现在检查元素中 - 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,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,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,221,229,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,h3,h4,h5,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: "B9B";
font-size: 18px;
float: right;
margin-left: 5px;
}
.active:after {
content: "B99";
}
.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 设置为 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>
我看到包装器 class 中的元素溢出了，所以我添加了：
.wrapper {
overflow: auto;
}
还有你的页脚class:
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>