頁腳重疊內容/文章

我在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 Fucking Ipsum</h2> 
      <p class="paragraph"> 
       If you fucking give up, you will achieve nothing. Practice won’t get you anywhere if you mindlessly fucking 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 fucking 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 fucking loves it.」 Don’t fucking 
      </p> 
      <br> 
      <p>Kunne du lide Lorem Fucking 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>

來源

2015-09-07 Jesper Andersen

這是因爲你使它作爲'位置：fixed'。將它改爲'position：relative' – user1012181

這表示感謝 –

嘗試'position：relative'。 – user1012181

的問題是由於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

來源

2015-09-07 18:51:23 user1012181

頁腳重疊內容/文章

回答

相關問題