1
私はページの下部に留まるためにフッタを持っていますが、コンテンツが重なっていて停止できません。フッタがページの下部にコンテンツを重複します
私は解決策のためにインターネットのいたるところを見てきましたが、どちらも機能しません。私はdivなどを動かす必要があると感じているが、間違っている可能性がある。ここで
は私のコードです：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet">
<link rel="stylesheet" href="style/stylesheet.css">
<title>Layout</title>
</head>
<body>
<div id="header">
<img src="img/top-bar/bar.png" height="10px" class="top">
<ul id="menu-bar">
<li><a href="#header" class="smoothScroll">Home</a></li>
<li><a href="#first" class="smoothScroll">Page 1</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Page 2</a>
<div class="dropdown-content">
<a href="#">Drop 1</a>
<a href="#">Drop 2</a>
</div>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Login</a></li>
</ul>
<img src="img/archery-1839284.jpg" class="cover">
</div>
<div id="wrapper">
<div id="content">
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
<div class="item" style="background-color: red;">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sit non ipsam aut perferendis neque magnam deleniti, officia necessitatibus porro odio ipsum est eum aliquam nulla placeat, deserunt? Atque, nisi.
</p>
</div>
</div>
<div id="footer">
<img src="img/top-bar/bar.png" height="10px" class="bottom">
</div>
</div>
</body>
</html>
CSS：
body {
background-color: grey;
margin: 0;
padding: 0;
font-family: 'Eczar', serif;
scroll-behavior: smooth;
}
#header {
position: relative;
text-align: center;
}
.top {
position: fixed;
width: 100%;
z-index: 3000;
left: 0;
top: 0;
}
.bottom {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
#wrapper {
padding: 0;
margin: 0;
position: absolute;
width: 100%;
margin-top: 100%;
}
.cover {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
background-image: url(../img/archery-1839284.jpg);
overflow: hidden;
}
#content {
width: 100%;
top: 100%;
height: 100%;
position: relative;
background-color: blue;
text-align: center;
}
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
position: relative;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
position: relative
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
display: block;
}
#footer {
width: 100%;
height: 70px;
background-color: greenyellow;
z-index: 3000;
bottom: 0;
left: 0;
position: absolute;
clear: both;
}
ありがとうございました。 – ArcherBoy27