gpt4 book ai didi

html - 页脚重叠内容/文章

转载 作者:太空宇宙 更新时间:2023-11-04 11:25:02 31 4
gpt4 key购买 nike

我的 HTML/CSS 中存在页脚与文章内容重叠的问题。是的,我一直在网上搜索但似乎没有任何效果,我希望你知道它有什么问题。我在这里做了一个codepen: CodePen LINK

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Welcome to me site</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="#">Katte</a></li>
<li><a href="#">Geolocation</a></li>
</ul>
</nav>
<section id="content">
<article>
<h2>Lorem Ipsum</h2>
<p class="paragraph">
If you xxx give up, you will achieve nothing. Practice won’t get you anywhere if you mindlessly xxx practice the same thing. Change only occurs when you work deliberately with purpose toward a goal. Sometimes it is appropriate to place various typographic elements on the outside of the xxx left margin of text to maintain a strong vertical axis. This practice is referred to as exdenting and is most often used with bullets and quotations. While having drinks with Tibor Kalman one night, he told me, “When you make something no one hates, no one xxx loves it.” Don’t xxx
</p>
<br>
<p>Kunne du lide Lorem Ipsum?</p>
<form action="First Name">
Navn: <br><br>
<input type="text" name="firstname" placeholder="Jesper">
<br><br>
<p>Hvor godt kunne du lide det på en skala fra 0 til 100?</p>
<input type="range" name="range">
<br>
<input type="submit" name="submit">
</form>
</article>
<article>
<h2>Katte video</h2>
<video width="400" controls>
<source src="Kitty.mp4" type="video/mp4">
</video>
</article>

<article>
<h2>One Fine Circle Son!</h2>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</article>
</section>
<footer>
<p><small> Jesper Andersen</small></p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" width="70">
<p><small> Copyright 2015</small></p>
</footer>
</body>
</html>

最佳答案

问题是由于position:fixed。将其更改为 position:relative

 footer{
clear: both;
font-size: 20px;
bottom:0;
width:100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-family: 'Oxygen';
position: relative;
}

http://codepen.io/anon/pen/WQvRbo

关于html - 页脚重叠内容/文章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32444494/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com